react-native#View JavaScript Examples

export default function StoryListItem({item, storyOnPress, name}) {
  return (
    <View style={Styles.container}>
      <TouchableOpacity onPress={storyOnPress}>
        <LinearGradient
          colors={['#CA1D7E', '#E35157', '#F2703F']}
          start={{x: 0.0, y: 1.0}}
          end={{x: 1.0, y: 1.0}}
          style={{borderRadius: 100, padding: 2}}>
          <View style={{borderWidth: 2, borderRadius: 100}}>
            <Image
              source={{uri: 'https://picsum.photos/200'}}
              style={{width: 55, height: 55, borderRadius: 70}}
            />
          </View>
        </LinearGradient>
      </TouchableOpacity>
      <View>
        <Text style={Styles.storyText}>{name}</Text>
      </View>
    </View>
  );
}

function DateSwitcher({ dateString }) {
  var moment = useMoment();
  const nav = useNavigation();
  const theme = useSelector(i=>i.themes[i.theme]);
  const [datePickerOpen,setDatePickerOpen] = React.useState(false);
  return <View style={{ padding: 4, width: 400, maxWidth: "100%", alignSelf: "center" }}>
    <Card cardStyle={{ backgroundColor: (theme.clanCardHeader || theme.navigation).bg }} noPad>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <Menu
          visible={datePickerOpen}
          onDismiss={() => setDatePickerOpen(false)}
          anchor={
            <IconButton icon="calendar" color={(theme.clanCardHeader || theme.navigation).fg} onPress={() => setDatePickerOpen(true)} />
          }
          contentStyle={{ padding: 0, backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border, width: 300 }}
        >
          <DatePicker noWrap value={moment({
            year: Number(dateString.split('-')[0]),
            month: Number(dateString.split('-')[1]) - 1,
            date: Number(dateString.split('-')[2]),
          })} onChange={(date) => {
            nav.setParams({
              date: `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
            })
          }} />
        </Menu>

        <Text allowFontScaling={false} style={{ flex: 1, ...font("bold"), fontSize: 16, color: (theme.clanCardHeader || theme.navigation).fg }}>{moment({
          year: Number(dateString.split('-')[0]),
          month: Number(dateString.split('-')[1]) - 1,
          date: Number(dateString.split('-')[2]),
        }).format('L')}</Text>
      </View>
    </Card>
  </View>
}

// Example
ExamplesRegistry.addPluginExample('Vector Icons', () =>
  <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
    <Icon name='rocket' size={40} color='white' />
    <Icon name='send' size={40} color='white' />
    <Icon name='star' size={40} color='white' />
    <Icon name='trophy' size={40} color='white' />
    <Icon name='warning' size={40} color='white' />
  </View>
)

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Disaster Resiliency</Text>
      <Text style={styles.content}>
        Due to climate change, floods are becoming more frequent and more severe,
        leading to specific issues for affected communities. This solution
        starter kit looks to aid potential victims better prepare for, act
        during, and recover from a flood. 
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Disasters-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Community Collaboration</Text>
      <Text style={styles.content}>
        There is a growing interest in enabling communities to cooperate among
        themselves to solve problems in times of crisis, whether it be to
        advertise where supplies are held, offer assistance for collections, or
        other local services like volunteer deliveries.
      </Text>
      <Text style={styles.content}>
        What is needed is a solution that empowers communities to easily connect
        and provide this information to each other.
      </Text>
      <Text style={styles.content}>
        This solution starter kit provides a mobile application, along with
        server-side components, that serves as the basis for developers to build
        out a community cooperation application that addresses local needs for
        food, equipment, and resources.
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Cooperation-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

Total = () => {
  const { containerStyle, goodsStyle, totalStyle } = styles;
  return (
    <View style={containerStyle}>
      <View style={goodsStyle}>
        <Icon name="ios-cart" size={20} style={{ marginRight: 8 }} />
        <Text>8 goods</Text>
      </View>

      <View style={totalStyle}>
        <Text>Total - </Text>
        <Text>$300</Text>
      </View>
    </View>
  );
}

render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <View style={styles.header}></View>
                    <Image style={styles.avatar} source={{ uri: 'http://getplaced.pythonanywhere.com/media/images/profile/Get_placed_logo_RcjthfI.jpeg' }} />
                    <View style={styles.body}>
                        <View style={styles.bodyContent}>
                            <Text style={styles.name}>Get Placed</Text>
                            <Text style={styles.info}>Let us give the best</Text>
                            <Text style={styles.description}>Hello and welcome to Get Placed! We want to connect with people and connect those people with information. At Get Placed, we help you to find the best courses, certifications and tutorials online.
                                Get Placed provides information of upcoming off-campus hiring drives, Internships <Text style={{ color: "#00BFFF" }} onPress={() => Linking.openURL('http://getplaced.pythonanywhere.com/Terms-and-condition/')}>read more</Text> </Text>

                        </View>
                    </View>
                </View>
            </ScrollView>
        );
    }

FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current  // Initial value for opacity: 0

    React.useEffect(() => {
        Animated.timing(
            fadeAnim,
            {
                toValue: 1,
                duration: 10000,
            }
        ).start();
    }, [fadeAnim])

    return (
        <Animated.View                 // Special animatable View
            style={{
                ...props.style,
                opacity: fadeAnim,         // Bind opacity to animated value
            }}
        >
            {props.children}
        </Animated.View>
    );
}

export default function searchNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Search"
        component={searchScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: 'transparent',
          },
          headerTitle: () => <View></View>,
          headerLeft: () => (
            <View style={{marginHorizontal: 5, marginVertical: 10}}>
              <TextInput
                style={{
                  backgroundColor: colors.textInputBackground,
                  height: 35,
                  width: Dimensions.get('screen').width - 10,
                  fontWeight: 'bold',
                  borderRadius: 10,
                  paddingStart: 20,
                  fontSize: 16,
                  color: 'white',
                }}
                placeholder="Search"
                placeholderTextColor={colors.textFaded2}
              />
            </View>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

render() {
    const {isVisible, content, onPress, btnText, intl} = this.props;
    const {formatMessage} = intl;
    return (
      <ModalBase
        isVisibleModal={isVisible}
        title={formatMessage(message.report)}
        description={content}
        styleTitle={styles.textTitle}
        styleDescription={styles.textContent}>
        <View style={styles.container}>
          <ButtonText
            text={btnText}
            onPress={onPress}
            styleBtn={styles.buttonConfirm}
            styleText={styles.textButtonConfirm}
          />
        </View>
      </ModalBase>
    );
  }

export default function EditProfileButton() {
  return (
    <TouchableOpacity>
      <View style={{marginTop: 10}}>
        <View
          style={{
            flex: 1,
            height: 30,
            borderRadius: 5,
            marginStart: 10,
            marginEnd: 10,
            backgroundColor: '#000',
            justifyContent: 'center',
            borderColor: '#262626',
            borderWidth: 1,
          }}>
          <View style={{alignItems: 'center'}}>
            <Text style={{color: 'white'}}>Edit Profile</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

render() {
    const {intl} = this.props;
    const {formatMessage} = intl;

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar hidden={true} />
        <ScrollView>
          <View style={styles.containerLogo}>
            <IconBTT height={LOGO_HEIGHT} width={LOGO_HEIGHT} />
            <View style={styles.borderLogo} />
            <IconBYT height={LOGO_HEIGHT} width={LOGO_HEIGHT} />
          </View>
          <View style={styles.body}>
            <View style={styles.viewDep}>
              <Text style={styles.description}>
                {formatMessage(message.description)}
              </Text>
              <MediumText style={styles.title}>
                {formatMessage(message.title)}
              </MediumText>
            </View>
          </View>
        </ScrollView>
        <View style={styles.boxButton}>
          <Text style={styles.button} onPress={this.onContinue}>
            {formatMessage(message.button)}
          </Text>
        </View>
      </SafeAreaView>
    );
  }

function UserActivityPage({ toggleDrawer, filters }) {
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme]);
  var date = moment().tz('America/Chicago');
  var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
  var route = useRoute();
  if (route.params.date) {
    dateString = route.params.date;
  }
  var username = route.params.username
  var userdata = useAPIRequest({
    endpoint: 'user',
    data: { username }
  })
  let user_id = userdata?.user_id
  var dataraw = useAPIRequest(user_id ? {
    endpoint: 'user/activity',
    data: { day: dateString, user_id },
    cuppazee: true
  } : null)
  if (!dataraw) return (
    <View style={{ flex: 1, alignContent: "center", justifyContent: "center", backgroundColor: theme.page.bg }}>
      <ActivityIndicator size="large" color={theme.page.fg} />
    </View>
  )
  var activityList = ActivityConverter(dataraw, filters, userdata);
  return <View style={{ flex: 1 }}>
    <FlatList
      contentContainerStyle={{ width: 500, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", paddingBottom: 88 }}
      style={{ flex: 1, backgroundColor: theme.page.bg }}
      extraData={[userdata?.username]}
      ListHeaderComponent={<View>
        <View style={{ padding: 4 }}>
          <Card noPad>
            <DateSwitcher dateString={dateString} toggleDrawer={toggleDrawer} />
            <ActivityOverview date={dateString} user_id={user_id} filters={filters} />
          </Card>
        </View>
      </View>}
      // getItemLayout={(data, index) => (
      //   { length: data.height||0, offset: data.offset||0, index }
      // )}
      data={activityList.sort((a, b) => new Date(b.time) - new Date(a.time))}
      renderItem={({ item: act }) => <ListItem act={act} userdata={userdata} />}
      keyExtractor={(item, index) => item.key}
    />
    <UserFAB username={username} user_id={user_id} />
  </View>
}

render() {
    const {isVisiblePhoneRegistered} = this.state;
    const {route, intl} = this.props;
    const item = (route && route.params.item) || {};
    const {formatMessage} = intl;
    const {Language, PhoneNumber} = configuration;

    const uri =
      item.largeIcon && item.largeIcon.length > 0
        ? item.largeIcon
        : require('./styles/images/corona.png');

    const title =
      (Language === 'vi' ? item.title : item.titleEn) ||
      item.title ||
      item.titleEn;

    const bigText =
      (Language === 'vi' ? item.bigText : item.bigTextEn) ||
      item.bigText ||
      item.bigTextEn;

    return (
      <SafeAreaView style={styles.container}>
        <Header
          styleHeader={styles.header}
          styleTitle={styles.textHeader}
          title={formatMessage(msg.announcement)}
        />
        <ScrollView style={styles.wrapper}>
          <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
            <FastImage
              source={item.largeIcon && item.largeIcon.length ? {uri} : uri}
              style={styles.avatar}
            />
            <View style={styles.content}>
              <MediumText numberOfLines={1} style={styles.titleText}>
                {title}
              </MediumText>
              <MediumText style={styles.colorDes}>
                {`${moment(Number(item.timestamp)).format(
                  'DD/MM/YYYY',
                )} - ${moment(Number(item.timestamp)).format('HH:mm')}`}
              </MediumText>
            </View>
          </View>
          <Text style={styles.textContent}>{bigText}</Text>
          {item._group === 'MOBILE' ? (
            PhoneNumber ? (
              <Text style={styles.textPhoneNumber}>
                {formatMessage(msg.registeredPhone)}:{' '}
                {this.formatNumberPhone(PhoneNumber)}
              </Text>
            ) : (
              <View style={styles.declare}>
                <TouchableOpacity onPress={this.onPress} style={styles.button}>
                  <Text style={styles.textButton}>
                    {formatMessage(msg.declare)}
                  </Text>
                </TouchableOpacity>
              </View>
            )
          ) : null}
        </ScrollView>
        <ModalBase
          isVisibleModal={isVisiblePhoneRegistered}
          title={formatMessage(msg.notification)}
          description={formatMessage(msg.registeredPhone)}>
          <View style={styles.modalFooter}>
            <ButtonClose
              text={formatMessage(message.dong)}
              onPress={this.onCloseModal}
            />
          </View>
        </ModalBase>
      </SafeAreaView>
    );
  }

CategoryScreen = (props) => {
  const [refreshing, setRefreshing] = useState(false)
  const { products, navigation } = props

  const slug = navigation.getParam('slug', '')

  useEffect(() => {
    props.showCategory(slug)
  }, [])

  const pullRefresh = () => {
    props.showCategory(slug)
  }

  const renderItem = ({ item, index }) => (
    <CardProduct
      item={item}
      onPress={() => onPress(item)}
    />
  )

  const onPress = (item) => {
    props.getDetail('/' + item?.slug)
    navigation.navigate('ProductDetail', {title: item.title, stock: item.stock})
  }

  return (
    <SafeAreaView style={apply('flex bg-gray-100')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {products?.fetching ? (
        <View style={styles.emptyState}>
          <ActivityIndicator size="large" color={apply('gray-900')} />
        </View>
      ) : (
        <FlatList
          data={products?.data[0]?.product}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          initialNumToRender={6}
          contentContainerStyle={apply('bg-gray-100 py-2')}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullRefresh()} />
          }
          horizontal={false}
          numColumns={2}
          key={2}
          onEndReachedThreshold={0.1}
          ListEmptyComponent={() =>
            <View style={styles.emptyState}>
              <Text>No data.</Text>
            </View>
          }
        />
      )}
    </SafeAreaView>
  )
}

export default function ClanScreen({ route }) {
  var {t} = useTranslation();
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme]);
  var username = route.params.username;
  const user_id = useAPIRequest({
    endpoint: 'user',
    data: { username },
    function: i=>i?.user_id
  })
  var bouncers = useAPIRequest(user_id?{
    endpoint: `user/bouncers/v1`,
    data: {
      user_id
    },
    cuppazee: true
  }:null)
  if(!bouncers) return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <ActivityIndicator size="large" color={theme.page.fg} />
  </View>
  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center", padding: 4, paddingBottom: 92 }}
        style={{ flex: 1, backgroundColor: theme.page.bg }}>
        {!bouncers && <Text allowFontScaling={false} style={{ color: theme.page.fg, ...font() }}>Loading...</Text>}
        {bouncers && <View style={{ padding: 4, height: 400, width: "100%" }}>
          <Card noPad>
            <MapView markers={bouncers.filter(i => i.bouncer).map(i => ({
              lat: Number(i.bouncer.latitude),
              lng: Number(i.bouncer.longitude),
              icon: i.pin_icon
            }))} style={{ flex: 1 }} />
          </Card>
        </View>}
        {bouncers?.map?.(i => <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
          <Card noPad cardStyle={{ opacity: i.bouncer ? 1 : 0.4 }}>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <View style={{ padding: 8 }}>
                <Image source={getIcon(i.pin_icon)} style={{ width: 48, height: 48 }} />
              </View>
              <View style={{ padding: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
                <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{i.friendly_name}</Text>
                {/* <Text allowFontScaling={false} style={{fontSize:16,opacity:0.8}}><MaterialCommunityIcons name="sword-cross" size={16}/> The Cup of Coffee Clan</Text> */}
                {i.bouncer ? <>
                  <Text allowFontScaling={false} style={{ fontSize: 14, ...font(400), color: theme.page_content.fg, opacity: 1 }}>At <Text allowFontScaling={false} style={font(700)}>{i.bouncer.friendly_name}</Text> by <Text allowFontScaling={false} style={font(700)}>{i.bouncer.full_url.match(/\/m\/([^/]+)\/[0-9]+/)[1]}</Text></Text>
                  <Text allowFontScaling={false} style={{ fontSize: 14, ...font(400), color: theme.page_content.fg, opacity: 0.8 }}>{i.location.formatted} [{i.timezone.map(i=>moment().tz(i).format('LT')).join(' / ')}]</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 12, ...font(400), color: theme.page_content.fg, opacity: 0.8 }}>{t('your_bouncers:capture',{count:i.number_of_captures})}{i.number_of_captures>0 && ` - ${t('your_bouncers:last_captured',{time:moment(i.last_captured_at).format('L LTS')})}`}</Text>
                </> : <>
                  <Text allowFontScaling={false} style={{ fontSize: 14, ...font(500), color: theme.page_content.fg, opacity: 1 }}>{t('your_bouncers:in_limbo')}</Text>
                  <Text allowFontScaling={false} style={{ fontSize: 12, ...font(400), color: theme.page_content.fg, opacity: 0.8 }}>{t('your_bouncers:capture',{count:i.number_of_captures})}{i.number_of_captures>0 && ` - ${t('your_bouncers:last_captured',{time:moment(i.last_captured_at).format('L LTS')})}`}</Text>
                </>}
              </View>
            </View>
          </Card>
        </View>)}
      </ScrollView>
      <UserFAB username={username} user_id={user_id} />
    </View>
  );
}

Home = props => {
  const { products, navigation } = props
  const [refreshing, setRefreshing] = useState(false)

  useEffect(() => {
    props.getProductsList({ params: '?page=1' })
  }, [])

  const pullRefresh = () => {
    props.getProductsList({ params: '?page=1' })
  }

  const renderItem = ({ item, index }) => (
    <CardProduct
      item={item}
      onPress={() => onPress(item)}
    />
  )

  const onEndReached = async() => {
    const { page, lastPage, isLoadMore } = props.products

    if (!isLoadMore && (page < lastPage)) {
      const newPage = page + 1

      props.moreProducts({ params: `?page=${newPage}`, page: newPage })
    }
  }

  const onPress = (item) => {
    props.getDetail('/' + item?.slug)
    navigation.navigate('ProductDetail', {title: item.title, stock: item.stock})
  }

  return (
    <SafeAreaView style={apply('flex bg-gray-100')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {products?.fetching ? (
        <View style={styles.emptyState}>
          <ActivityIndicator size="large" color={apply('gray-900')} />
        </View>
      ) : (
        <FlatList
          data={products.data}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          initialNumToRender={8}
          contentContainerStyle={apply('bg-gray-100 py-2')}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullRefresh()} />
          }
          onEndReached={onEndReached}
          horizontal={false}
          numColumns={2}
          key={2}
          onEndReachedThreshold={0.1}
          ListEmptyComponent={() =>
            <View style={styles.emptyState}>
              <Text>No data.</Text>
            </View>
          }
          ListFooterComponent={() =>
            products?.isLoadMore && (
              <View style={styles.emptyState}>
                <ActivityIndicator size="large" color={apply("gray-900")} />
              </View>
            )
          }
        />
      )}
    </SafeAreaView>
  )
}

Input = (
  {
    inputStyle,
    value,
    valueColor,
    placeholder,
    placeholderTextColor,
    textAlign,
    onChangeText,
    onEndEditing,
    onSubmitEditing,
    renderLeft,
    renderRight,
    testID,
  },
  ref,
) => {
  const defaults = {
    inputStyle: inputStyle,
    value: value ?? '',
    valueColor: valueColor ?? '#000000',
    placeholder: placeholder ?? '',
    placeholderTextColor: placeholderTextColor ?? '#CACACA',
    textAlign: textAlign || (I18nManager.isRTL ? 'right' : 'left'),
    onChangeText: onChangeText ?? voidFunction,
    onEndEditing: onEndEditing ?? voidFunction,
    onSubmitEditing: onSubmitEditing ?? voidFunction,
    renderLeft: renderLeft,
    renderRight: renderRight,
    testID: testID,
  };

  const onChangeTextValidator = txt => {
    if (txt.length == 1 && txt == ' ') {
      return;
    }
    if (txt.length > 1 && txt.slice(-2) == '  ') {
      return;
    }
    defaults.onChangeText(txt);
  };

  return (
    <View
      style={{
        ...styles.defaultInputStyle,
        ...defaults.inputStyle,
      }}>
      {defaults.renderLeft && <View style={styles.pressableLeft}>{defaults.renderLeft()}</View>}
      <TextInput
        testID={defaults.testID}
        ref={ref}
        value={defaults.value}
        placeholder={defaults.placeholder}
        placeholderTextColor={defaults.placeholderTextColor}
        textAlign={defaults.textAlign}
        onChangeText={onChangeTextValidator}
        onEndEditing={defaults.onEndEditing}
        onSubmitEditing={defaults.onSubmitEditing}
        //
        style={{...styles.inputField, color: defaults.valueColor}}
        returnKeyType={'done'}
        textContentType={'oneTimeCode'}
        allowFontScaling={false}
        autoComplete={'off'}
        autoCorrect={false}
        autoCapitalize={'none'}
        autoFocus={true}
      />
      {defaults.renderRight && <View style={styles.pressableRight}>{defaults.renderRight()}</View>}
    </View>
  );
}

OrderList = (props) => {
  const [refreshing, setRefreshing] = useState(false)
  const { list, navigation } = props

  useEffect(() => {
    props.getInvoice({params: 1})
  }, [])

  const renderItem = ({item, index}) => {
    const status = item?.status.replace('_', ' ')
    return (
      <TouchableOpacity style={styles.card} activeOpacity={0.9} onPress={() => navigation.navigate('Invoice', { inv: item?.invoice_id })}>
        <Text style={apply('font-bold text-blue-500')}>#{item?.invoice_id}</Text>
        <Text style={apply('mb-1 text-base')}>{item?.product?.title}</Text>
        <Text style={apply('mb-1')}>Rp{formatMoney(item?.total ?? 0)}</Text>
        <Text style={status == 'done' ? [styles.status, apply('bg-green-600')] : styles.status}>{status.toUpperCase()}</Text>
      </TouchableOpacity>
    )
  }

  const pullRefresh = () => {
    props.getInvoice({params: 1})
  }

  const onEndReached = () => {
    const { page, lastPage, isLoadMore } = props.list

    if(!isLoadMore && (page < lastPage)) {
      const newPage = page+1

      props.moreInvoice({params: newPage, page: newPage})
    }
  }

  return (
    <SafeAreaView style={apply('flex py-1')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {list.fetching ? (
        <View style={styles.emptyState}>
          <ActivityIndicator size="large" color={apply('black')} />
        </View>
      ) : (
        <FlatList 
          data={list.data}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={10}
          contentContainerStyle={apply('mx-2')}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullRefresh()} />
          }
          onEndReached={onEndReached}
          onEndReachedThreshold={0.1}
          ListEmptyComponent={() =>
            <View style={styles.emptyState}>
              <Text style={apply('text-center')}>No data</Text>
            </View>
          }
          ListFooterComponent={() =>
            list?.isLoadMore && (
              <View style={styles.emptyState}>
                <ActivityIndicator size="large" color={apply('black')} />
              </View>
            )
          }
        />
      )}
    </SafeAreaView>
  )
}

export default function searchScreen() {
  return (
    <View style={{backgroundColor: '#000'}}>
      <SearchTopTags />
      <SearchGrid />
    </View>
  );
}

export default function ClanScreen({ route }) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var username = route.params.username;
  var location = {
    lat: route.params.lat,
    lng: route.params.lon
  }
  var blastSize = route.params.size;
  const user_id = useAPIRequest({
    endpoint: 'user',
    data: { username },
    function: i => i?.user_id
  })
  var blastData = useAPIRequest(location.lat !== 0 || location.lng !== 0 ? {
    endpoint: `map/blast/v1`,
    cuppazee: true,
    data: {
      user_id,
      ...location,
      amount: blastSize
    }
  } : null)
  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center", padding: 4, paddingBottom: 92 }}
        style={{ flex: 1, backgroundColor: theme.page.bg }}>
        {!blastData && <View style={{ flex: 1, padding: 8, justifyContent: "center", alignItems: "center" }}>
          <ActivityIndicator size="large" color={theme.page.fg} />
        </View>}
        {blastData?.map?.((i, index) => <View style={{ padding: 4, width: 400, maxWidth: "100%", flexGrow: 1 }}>
          <Card noPad>
            <View>
              <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 20, color: theme.page_content.fg, padding: 4, textAlign: "center", lineHeight: 20 }}>{t('blast_checker:blast',{n:index + 1})} - {t('blast_checker:munzees',{count:i.total})}</Text>
              <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg, padding: 4, textAlign: "center", lineHeight: 16 }}>{t('blast_checker:points',i.points)} ({t('blast_checker:average',{avg:i.points.avg})})</Text>
              <View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
                {Object.entries(i.types).map(([icon, data]) => <BlastType icon={icon} data={data} />)}
              </View>
            </View>
          </Card>
        </View>)}
      </ScrollView>
      <UserFAB username={username} user_id={user_id} />
    </View>
  );
}

Products = props => {
  const {category} = props
  const [refreshing, setRefreshing] = useState(false)

  useEffect(() => {
    props.getCategory({})
  }, [])

  const pullToRefresh = () => {
    props.getCategory({})
  }

  const renderItem = ({ item, index }) => (
    <TouchableOpacity activeOpacity={0.9} onPress={() => props.navigation.navigate('CategoryScreen', {slug: item?.slug, title: item?.title})} style={styles.card}>
      <Image source={{ uri: item?.thumbnail }} style={styles.thumb} />
      <View style={styles.content}>
        <Text style={styles.title}>{item?.title}</Text>
        <Text style={styles.desc}>{item?.desc.substr(0, 79)}...</Text>
      </View>
    </TouchableOpacity>
  )

  return (
    <SafeAreaView style={apply('bg-gray-100 flex')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {category?.fetching ? (
        <View style={apply('flex justify-center items-center')}>
          <ActivityIndicator size="large" color={apply('gray-900')} />
        </View>
      ) : (
        <FlatList
          data={category.data}
          initialNumToRender={3}
          keyExtractor={(item, index) => index.toString()}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullToRefresh()} />
          }
          contentContainerStyle={apply('pt-1')}
          renderItem={renderItem}
          ListEmptyComponent={() =>(
            <View>
              <Text>Tidak ada data ditampilkam</Text>
            </View>
          )}
        />
      )}
    </SafeAreaView>
  )
}

function User({ item }) {
  return ({
    user_activity: <View style={{ padding: 4, flex: 1 }}>
      <ActivityCard user_id={item.user_id} username={item.username} displayUsername={true} />
    </View>,
    blankHack: <View style={{ flex: 1, padding: 4 }}></View>
  }[item.type]||null)
}

render () {
    return (
      <View style={styles.applicationView}>
        <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
        <ReduxNavigation />
      </View>
    )
  }

export default function profileNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Profile"
        component={profileScreen}
        options={{
          headerTitle: (
            <TouchableOpacity
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{color: 'white', fontWeight: 'bold', fontSize: 16}}>
                johndoe
              </Text>
            </TouchableOpacity>
          ),
          headerTitleStyle: {alignSelf: 'center'},
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: colors.seperatorLineColor,
          },
          headerRight: () => (
            <TouchableOpacity>
              <View
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginRight: 10,
                }}>
                <Image
                  source={images.list3}
                  style={{resizeMode: 'contain', width: 25, height: 25}}
                />
              </View>
            </TouchableOpacity>
          ),
          headerLeft: () => (
            <TouchableOpacity>
              <View
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginStart: 10,
                }}>
                <Image
                  source={images.addIcon}
                  style={{resizeMode: 'contain', width: 20, height: 20}}
                />
              </View>
            </TouchableOpacity>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

// Example
// prettier-ignore
ExamplesRegistry.addPluginExample('I18n', () =>
  <View>
    <Text style={{color: '#ffffff'}}>Default Locale: {I18n.defaultLocale}</Text>
    <Text style={{color: '#ffffff'}}>Current Locale: {I18n.locale}</Text>
  </View>
)

export default function UserActivityScreen() {
  var theme = useSelector(i => i.themes[i.theme]);
  var [size, onLayout] = useComponentSize();
  var [open, setOpen] = React.useState(false);
  var [filters, setFilters] = React.useState({
    activity: new Set(),
    state: new Set(),
    category: new Set()
  });
  var drawerRef = React.useRef();
  function toggleDrawer() {
    console.log('toggle', open)
    if (!open) {
      drawerRef.current?.openDrawer()
    } else {
      drawerRef.current?.closeDrawer()
    }
  }
  return <View style={{ flex: 1, height: "100%" }} onLayout={onLayout}>
    {size?.width > 750 ? <View style={{ flexDirection: "row", flex: 1 }}>
      <View style={{ flex: 1 }}>
        <UserActivityPage filters={filters} />
      </View>
      <View style={{ width: 250, backgroundColor: theme.page_content.bg }}>
        <Sidebar filters={filters} onFiltersChange={setFilters} />
      </View>
    </View> : <DrawerLayout
      drawerLockMode={(Platform.OS === "web" && !open) ? "locked-closed" : "unlocked"}
      ref={drawerRef}
      drawerWidth={250}
      drawerPosition={DrawerLayout.positions.Right}
      drawerType='front'
      drawerBackgroundColor={theme.page_content.bg}
      onDrawerOpen={() => setOpen(true)}
      onDrawerClose={() => setOpen(false)}
      renderNavigationView={() => <Sidebar filters={filters} onFiltersChange={setFilters} />}>
        <UserActivityPage filters={filters} toggleDrawer={toggleDrawer} />
      </DrawerLayout>}
  </View>
}

render() {
    return(
      <View style={this.state.styles.container}>
        <Questions state={this.state} />
      </View>
    );
  }

export default function ActivityListItem({ act: acti, userdata }) {
  var moment = useMoment();
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var navigation = useNavigation();
  return <View style={{ padding: 4 }}>
    <Card noPad>
      {[acti,...acti.subCaptures||[]].map((act,index,list)=><TouchableRipple key={act.key} onPress={() => { navigation.navigate('MunzeeDetails', { username: act.creator, code: act.code }) }}>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <View style={{ width: 60, paddingVertical: 4, marginRight: 4, borderTopLeftRadius: index===0?8:0, borderBottomLeftRadius: index===list.length-1?8:0, backgroundColor: theme.dark ? null : theme.activity[act.type]?.bg, borderRightWidth: theme.dark ? 2 : 0, borderRightColor: theme.activity[act.type]?.fg, position: "relative", alignContent: 'center', alignItems: "center", flexGrow: 0 }}>
            <View style={{ justifyContent: 'center', flexDirection: "row", flexWrap: "wrap", flexGrow: 0 }}>
              <View style={{ paddingHorizontal: 8, borderRadius: 9.5 }}>
                <Text allowFontScaling={false} style={{ alignSelf: "stretch", textAlign: "center", color: theme.activity[act.type]?.fg, ...font("bold") }}>{(act.points) > 0 && '+'}{(Number(act.points)) || t('activity:none')}</Text>
              </View>
            </View>
            <View style={{ position: 'relative' }}>
              <Image style={{ height: 32, width: 32 }} source={getIcon(act.pin)} />
              {hostIcon(act.pin) && <Image style={{ height: 24, width: 24, position: "absolute", right: -5, bottom: -4 }} source={hostIcon(act.pin)} />}
            </View>
          </View>
          <View style={{ flex: 1 }}>
            {index===0&&<Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="middle" style={{ color: theme.page_content.fg, ...font() }}>
              {({
                capon_reno: () => t('activity:user_renovated', { user: act.capper }),
                capon: () => t('activity:user_captured', { user: act.capper }),
                capture_reno: () => t('activity:you_renovated'),
                capture: () => t('activity:you_captured'),
                deploy: () => t('activity:you_deployed')
              })[act.type + (isRenovation(act) ? "_reno" : "")]?.() || "What"}
            </Text>}
            {!isRenovation(act) && <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="middle" style={{ color: theme.page_content.fg, ...font("bold") }}>{act.name}</Text>}
            {!isRenovation(act) && <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="middle" style={{ color: theme.page_content.fg, opacity: 0.8, ...font() }}>
              {({
                capon: () => t('activity:by_you'),
                capture: () => act.creator === userdata?.username ? t('activity:by_you') : t('activity:by_user', { user: act.creator }),
                deploy: () => t('activity:by_you')
              })[act.type]?.() || "What"}
            </Text>}
          </View>
          <View style={{ padding: 8, flexGrow: 0, paddingLeft: 16, alignContent: 'center', position: "relative", alignItems: "flex-end" }}>
            {(moment(act.time).tz('America/Chicago').format('DD/MM') !== moment(act.time).format('DD/MM')) && <Text allowFontScaling={false} style={{ alignSelf: "stretch", textAlign: "right", fontSize: 10, color: theme.page_content.fg, ...font("bold") }}>{moment(act.time).format('DD/MM')}</Text>}
            <Text allowFontScaling={false} style={{ alignSelf: "stretch", textAlign: "right", color: theme.page_content.fg, ...font("bold") }}>{moment(act.time).format('LT')}</Text>
            <Text allowFontScaling={false} style={{ alignSelf: "stretch", textAlign: "right", fontSize: 10, color: theme.page_content.fg, ...font("bold") }}>Local</Text>
          </View>
        </View>
      </TouchableRipple>)}
    </Card>
  </View>
}