Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Grid of Contacts [Data-Enabled]

Data Enabled
List

A 2-column list of contacts fed by example-data.draftbit.com/people.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import { Divider, FieldSearchBarFull, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { FlatList, Image, KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
   const REPLACE_SCREEN_NAME = props => {
     const [searchBarValue, setSearchBarValue] = React.useState(undefined);
     const { theme } = props
     return (
     <ScreenContainer  hasSafeArea={true} scrollable={true}>
     <KeyboardAvoidingView  keyboardVerticalOffset={44} enabled={false} behavior=""position"">
     <View  style={styles.ViewJk}>
     <Text  style={StyleSheet.flatten([styles.Text_8p, theme.typography.headline3, { color: theme.colors.strong }])}>
       Contacts
     </Text>
   <FieldSearchBarFull  style={StyleSheet.flatten([styles.FieldSearchBarFullJ4, { borderColor: theme.colors.divider, borderRadius: theme.borderRadius.global }])}placeholder=""Search"" onChange={searchBarValue => setSearchBarValue(searchBarValue)} value={searchBarValue} />
     </View>
     <View  style={styles.Viewun}pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true} hitSlop={{}}>
     <View  style={styles.ViewBg}hitSlop={{}} accessible={true} pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}ellipsizeMode=""tail"" allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true}>
       Recent
     </Text>
     <Touchable  style={styles.TouchablekU}>
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}ellipsizeMode=""tail"" allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true}>
       See All
     </Text>
     </Touchable>
     </View>
   <Divider  style={styles.DivideriK}color={theme.colors.divider} height={1} />
     </View>
   <Fetch
   url={`https://example-data.draftbit.com/people?_limit=10`}
   headers={{""Accept"": ""application/json"",""Content-Type"": ""application/json""}}
 >
 {({ loading, error, data, refetch }) => {
   if (loading) {
     return (null)
   }
   if (error) {
     return (null)
   }
   if (!data) {
     return (null)
   }
   return (<FlatList renderItem={({ item }) =>
     <Touchable  style={StyleSheet.flatten([styles.Touchable_2s, { backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.global, borderColor: theme.colors.divider }])}>
     <View  hitSlop={{}} importantForAccessibility=""auto"" pointerEvents=""auto"" accessible={true}>
     <View  >
       <Image  style={StyleSheet.flatten([styles.ImageFA, { borderRadius: theme.borderRadius.global }])}source={{ uri: item[""bgimage_thumb""] }} resizeMode=""cover"" />
     <View  style={styles.ViewPt}hitSlop={{}} pointerEvents=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.Text_9I, theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true}>
       {item && item[""full_name""]}
     </Text>
     <Text  style={StyleSheet.flatten([styles.TextPA, theme.typography.caption, { color: theme.colors.light }])}allowFontScaling={true}>
       {item && item[""job_title""]}
     </Text>
     </View>
     </View>
     </View>
     </Touchable>
   } contentContainerStyle={styles.FlatListpb}data={data}  />)
 }}
</Fetch>
     </KeyboardAvoidingView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ ImageFA: {
width: 42, height: 42, marginBottom: 14, alignSelf: ""center"" }, Text_9I: {
textAlign: ""center"" }, FlatListpb: {
paddingBottom: 44, flexWrap: ""wrap"", width: ""100%"", flexDirection: ""row"", flexGrow: 1, alignContent: ""stretch"", paddingLeft: 24, paddingRight: 24, justifyContent: ""space-evenly"" }, ViewBg: {
flexDirection: ""row"", justifyContent: ""space-between"", alignItems: ""center"", width: ""100%"" }, Text_8p: {
marginBottom: 24 }, ViewJk: {
paddingTop: 32, alignItems: ""flex-start"", paddingBottom: 24, paddingLeft: 32, paddingRight: 32 }, Touchable_2s: {
paddingLeft: 12, paddingRight: 12, paddingTop: 24, paddingBottom: 24, alignContent: ""center"", borderBottomWidth: 1, borderLeftWidth: 1, borderTopWidth: 1, borderRightWidth: 1, flexGrow: 1, width: 148, marginLeft: 4, marginRight: 4, marginTop: 4, marginBottom: ""10%"" }, TextPA: {
textAlign: ""center"" }, ViewPt: {
alignSelf: ""center"", alignContent: ""center"" }, FieldSearchBarFullJ4: {
borderLeftWidth: 1, borderBottomWidth: 1, borderTopWidth: 1, borderRightWidth: 1, width: ""100%"" }, DivideriK: {
marginTop: 14, height: 1 }, Viewun: {
paddingRight: 32, marginBottom: 14, paddingLeft: 32, width: ""100%"" }, TouchablekU: {
alignSelf: ""flex-end"" } })
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.