react-native#Text 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>
  );
}

render() {
    var result = Utils.currentUser()
    return (
      <View style={styles.container}>
        <CardView
          style={headerStyles.container}
          cardElevation={2}
          cardMaxElevation={2}>
          <Text style={headerStyles.header_label}>Settings</Text>
        </CardView>
        <ProgressLoader
          visible={this.state.visible}
          isModal={true}
          isHUD={true}
          hudColor={"#000000"}
          color={"#FFFFFF"} />
        <View style={headerStyles.header_container}>
          <View style={headerStyles.app_icon_view}>
            <Image source={result[0] && result[0].photoURL && result[0].photoURL.length != 0 ? { uri: result[0].photoURL } : require('../../../assets/icons/ic_person.png')} style={headerStyles.icon_style_logo} />
          </View>
        </View>
        <View style={headerStyles.app_label_view}>
          <Text style={headerStyles.app_label}>{result[0] && result[0].name}</Text>
        </View>
        <View style={headerStyles.app_label_view}>
          <Text style={headerStyles.app_label}>{result[0] && result[0].email}</Text>
        </View>
        <TouchableOpacity
          style={headerStyles.logout_btn_signout_container}
          onPress={this._signOut.bind(this, result[0])}>
          <View style={headerStyles.logout_btn_signout_view}>
            <View style={headerStyles.logout_btn_label_view}>
              <Text style={headerStyles.logout_btn_signout_label}>Sign Out</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

function OverviewItem({ i, total }) {
  var small = total > 25;
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  var nav = useNavigation();
  var { t } = useTranslation();
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center" }}>
          <Image style={{ height: small ? 24 : 32, width: small ? 24 : 32 }} source={getIcon(i[0])} />
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, ...font(), fontSize: 12 }}>{i[1].total}</Text>
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
    contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <View>
        <Image style={{ height: 48, width: 48 }} source={getIcon(i[0])} />
      </View>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{i[1].total}x {(getType(i[0]) || { name: i[0].slice(49, -4) }).name}</Text>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{t('activity:point', { count: i[1].points })}</Text>
      <Button
        mode="contained"
        style={{ backgroundColor: theme.navigation.bg }}
        onPress={() => { setOpen(false); nav.push('DBType', { munzee: i[0].slice(49, -4) }) }}>
        {t('db:type_info')}
      </Button>
    </View>
  </Menu>
}

// Example
ExamplesRegistry.addPluginExample('Animatable', () =>
  <View>
    <Animatable.View
      animation='fadeIn'
      iterationCount='infinite'
      direction='alternate'
      style={[styles.button, styles.fadeInButton]}
    >
      <Text style={styles.fadeInButtonText}>Faaaaaddddeeeeddd</Text>
    </Animatable.View>
    <Animatable.View
      style={[styles.button, styles.jelloButton]}
      animation='jello'
      iterationCount='infinite'>
      <Text style={styles.jelloButtonText}>Jelloo00000000</Text>
    </Animatable.View>
    <Animatable.View
      animation='pulse'
      iterationCount='infinite'
      style={[styles.button, styles.pulseButton]}>
      <Text style={styles.pulseButtonText}>puLsepuLsepuLse</Text>
    </Animatable.View>
  </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>
)

SettingsButton = memo(({ title, rightComponent }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)

    return (
        <View style={{
            width: "100%",
            height: "auto"
        }}>
            <View style={{
                width: "100%",
                height: "auto",
                flexDirection: "row",
                justifyContent: "space-between",
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 10,
                paddingBottom: 10
            }}>
                <View>
                    <Text style={{
                        color: darkMode ? "white" : "black",
                        paddingTop: typeof rightComponent !== "undefined" ? (Platform.OS == "android" ? 3 : 7) : 0
                    }}>
                        {title}
                    </Text>
                </View>
                {
                    typeof rightComponent !== "undefined" && (
                        <View>
                            {rightComponent}
                        </View>
                    )
                }
            </View>
        </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>
  );
}

export default function DirectMessageScreen() {
  return (
    <>
      <FlatList
        style={{backgroundColor: '#000', flex: 1}}
        data={data}
        renderItem={() => (
          <>
            <DirectMessageSearch />
            <Title />
            <MessagesList />
          </>
        )}
      />
      <TouchableOpacity>
        <View
          style={{
            backgroundColor: colors.bottomBackGround,
            height: 45,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Image
              source={images.dmBottomCamera}
              style={{width: 25, height: 25}}
            />
            <Text style={{color: '#4296f5', marginStart: 10}}>Camera</Text>
          </View>
        </View>
      </TouchableOpacity>
    </>
  );
}

NormalToast = memo(({ message }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)

    return (
        <View pointerEvents="box-none" style={{
            zIndex: 99999
        }}>
            <Text style={{
                color: darkMode ? "white" : "black"
            }}>
                {message}
            </Text>
        </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>
        );
    }

export default function PostLikes({post}) {
  return (
    <TouchableOpacity
      onPress={() => console.log('Pressed Post Likes')}
      style={{marginLeft: 15, marginTop: 10, marginEnd: 15}}>
      <Text style={{color: colors.text, fontWeight: 'bold'}}>
        {post.likeCount} likes{' '}
      </Text>
    </TouchableOpacity>
  );
}

function JobDetail(props) {

    const { id, title, snippet, author, body, post_date } = props.route.params.data;
    const { width } = useWindowDimensions();
    var date = new Date(`${post_date}`)

    const source = {
        html: `
      ${body}`
    };
    const tagsStyles = {
        body: {
            marginLeft: 20,
            marginRight: 20,
        },

    };

    return (
        <View>
            <ScrollView style={styles.Top}>
                <View style={styles.headerStyle}>
                    <Title style={{ fontSize: 31, marginLeft: 10, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}>  -  ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
                </View>
                <View>
                    <RenderHtml
                        tagsStyles={tagsStyles}
                        contentWidth={width}
                        source={source}
                    />
                </View>

            </ScrollView>
        </View >

    )
}

export default function UserBio() {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        marginStart: 10,
        marginTop: 20,
      }}>
      <View style={{marginBottom: 5}}>
        <Text style={{color: 'white', fontWeight: 'bold'}}>John Doe</Text>
      </View>
      <View style={{marginBottom: 5}}>
        <Text style={{color: 'white'}}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat
        </Text>
      </View>
    </View>
  );
}

OpenSansText = ({text, style, children, ...otherProps}) => {
  return (
    <Text
      style={[styles.fontSkin, style]}
      allowFontScaling={false}
      {...otherProps}>
      {text ? text : children}
    </Text>
  );
}

function TagContainer({tag}) {
  return (
    <TouchableOpacity onPress={() => console.log('Pressed Search Tag')}>
      <View
        style={{
          height: 30,
          borderWidth: 1.5,
          borderColor: colors.seperatorLineColor,
          borderRadius: 8,
          justifyContent: 'center',
          marginBottom: 10,
          backgroundColor: '#000',
          marginHorizontal: 5,
        }}>
        <Text
          style={{
            color: 'white',
            marginHorizontal: 15,
            fontWeight: 'bold',
          }}>
          {tag}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

render(){
        const { item, index, darkMode } = this.props

        const windowWidth = this.props.dimensions.window.width || window.width
        const imageWidthAndHeight = Math.floor(windowWidth - 30)

        return (
            <TouchableOpacity activeOpacity={0.6} key={index.toString()} style={{
                height: imageWidthAndHeight,
                width: imageWidthAndHeight,
                paddingLeft: 30,
                alignItems: "center",
                justifyContent: "center",
                marginBottom: 25
            }} onPress={() => this.props.photosRangeItemClick(item)}>
                <FastImage source={this.props.hideThumbnails ? getImageForItem(item) : typeof item.thumbnail !== "undefined" ? { uri: "file://" + THUMBNAIL_BASE_PATH + item.thumbnail } : getImageForItem(item)} style={{
                    width: typeof item.thumbnail !== "undefined" && !this.props.hideThumbnails ? imageWidthAndHeight : 40,
                    height: typeof item.thumbnail !== "undefined" && !this.props.hideThumbnails ? imageWidthAndHeight : 40,
                    zIndex: 2,
                    borderRadius: typeof item.thumbnail !== "undefined" ? 15 : 0
                }} onError={() => {
                    if(typeof item.thumbnail == "string"){
                        DeviceEventEmitter.emit("event", {
                            type: "check-thumbnail",
                            item
                        })
                    }
                }} />
                <View style={{
                    backgroundColor: darkMode ? "rgba(34, 34, 34, 0.5)" : "rgba(128, 128, 128, 0.6)",
                    position: "absolute",
                    zIndex: 100,
                    top: 15,
                    left: 30,
                    zIndex: 100,
                    padding: 5,
                    paddingLeft: 10,
                    paddingRight: 10,
                    borderRadius: 15
                }}>
                    <Text style={{
                        color: "white",
                        fontWeight: "bold",
                        fontSize: 20
                    }}>
                        {item.title}
                    </Text>
                </View>
                {
                    typeof item.remainingItems == "number" && item.remainingItems > 1 && (
                        <View style={{
                            backgroundColor: darkMode ? "rgba(34, 34, 34, 0.7)" : "rgba(128, 128, 128, 0.7)",
                            width: "auto",
                            height: "auto",
                            borderRadius: 15,
                            position: "absolute",
                            zIndex: 100,
                            padding: 5,
                            paddingLeft: 10,
                            top: 15,
                            right: 0,
                            flexDirection: "row"
                        }} pointerEvents="box-none">
                            <Text style={{
                                color: "white",
                                fontSize: 15
                            }}>{item.remainingItems}</Text>
                            <Ionicon name="chevron-forward-outline" size={16} color="white" style={{
                                marginTop: Platform.OS == "android" ? 2.25 : 0.5,
                                marginLeft: 2
                            }} />
                        </View>
                    )
                }
            </TouchableOpacity>
        )
    }

export default function addPostScreen() {
  return (
    <View style={palette.container.center}>
      <Text style={palette.text}>Add Post</Text>
    </View>
  );
}

Feedback = () => {
  const navigation = useNavigation()
  const { t } = useTranslation()
  const { theme } = useTheme()

  const sendEmailHandler = ({ name, email, message }) => {
    const data = JSON.stringify({ name, email, message }).replace(/[{}'']/g, '')

    fetch('https://api.sendgrid.com/v3/mail/send', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + process.env.API_SEND_GRID_KEY
      },
      body: JSON.stringify({
        personalizations: [
          {
            to: [
              {
                email: process.env.SEND_GRID_EMAIL_TO
              }
            ],
            subject: 'Bus Timetable Feedback'
          }
        ],
        from: {
          email: process.env.SEND_GRID_EMAIL_FROM
        },
        content: [
          {
            type: 'text/plain',
            value: data
          }
        ]
      })
    })
      .then(() => {
        Alert.alert('', t('feedback.onSuccessfulSubmit'), [
          {
            text: t('feedback.cancel'),
            onPress: () => navigation.navigate('About')
          }
        ])
      })
      .catch(() => {
        Alert.alert(t('feedback.error'), t('feedback.onSubmitError'), [
          { text: t('feedback.cancel') }
        ])
      })
  }

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <Text style={[styles.info, { color: theme.text }]}>
          {t('feedback.info')}
        </Text>
        <ScrollView style={styles.form}>
          <Form
            onSubmitHandler={sendEmailHandler}
            namePlaceholder={t('feedback.namePlaceholder')}
            emailPlaceholder={t('feedback.emailPlaceholder')}
            messagePlaceholder={t('feedback.messagePlaceholder')}
            submitTitle={t('feedback.submitTitle')}
            schemaRequiredName={t('feedback.schemaRequiredName')}
            schemaRequiredEmail={t('feedback.schemaRequiredEmail')}
            schemaRequiredMessage={t('feedback.schemaRequiredMessage')}
            buttonColor={theme.buttonColor}
            buttonText={theme.buttonText}
          />
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  )
}

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>
  );
}

export default function ConstantStories() {
  return (
    <ScrollView horizontal={true}>
      <View
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          marginStart: 10,
          marginEnd: 10,
          marginTop: 10,
          marginBottom: 5,
          alignItems: 'center',
        }}>
        <TouchableOpacity>
          <View
            style={{
              backgroundColor: colors.bottomBackGround,
              width: 64,
              height: 64,
              borderRadius: 100,
              alignItems: 'center',
              justifyContent: 'center',
              borderWidth: 1,
              borderColor: '#262626',
            }}>
            <Image
              source={images.addIcon}
              style={{width: 20, height: 20, borderRadius: 100}}
            />
          </View>
        </TouchableOpacity>
        <Text
          style={{
            color: 'white',
            fontSize: 12,
            marginTop: 5,
          }}>
          New
        </Text>
      </View>
      <StoryListItem name="Holiday" />
    </ScrollView>
  );
}

export default function SearchScreen({ navigation }) {
  var {t} = useTranslation();
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme])
  function hasChild(cat) {
    return !!categories.find(i => i.parents.includes(cat.id));
  }
  var data = useAPIRequest({
    endpoint: 'bouncers/overview/v1',
    cuppazee: true
  })
  function get(i) {
    var x = 0;
    for(var icon of [i.icon,...i.alt_icons||[]]) {
      x = (data||{})[`https://munzee.global.ssl.fastly.net/images/pins/${icon}.png`]||x;
    }
    return x;
  }
  return (
    <ScrollView
      contentContainerStyle={{ width: 800, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", padding: 4 }}
      style={{ flex: 1, backgroundColor: theme.page.bg }}>
      {Object.entries(data||{}).filter(i=>!getType(i[0])).length>0&&<View style={{ padding: 4 }}>
        <Card noPad>
          <View>
            <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
              <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 24, color: theme.page_content.fg, paddingVertical: 4, textAlign: "center" }}>Uncategorised</Text>
              {/* <IconButton icon="map" color={theme.page_content.fg} onPress={()=>navigation.navigate("BouncerMap",{type:cdata.id})} /> */}
            </View>
            <View style={{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"}}>
              {Object.entries(data||{}).filter(i=>!getType(i[0])).map(i => <TouchableRipple>
                <View key={i.id} style={{ padding: 4, width: 80, alignItems: "center", opacity: i[1]>0?1:0.4 }}>
                  <Image style={{ height: 32, width: 32, marginHorizontal: 8 }} source={getIcon(i[0])} />
                  <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="middle" style={{ ...font("bold"), fontSize: 12, color: theme.page_content.fg }}>{i[0].replace(/https:\/\/munzee.global.ssl.fastly.net\/images\/pins\/(.+)\.png/,'$1')}</Text>
                  <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{i[1].toString()}</Text>
                </View>
              </TouchableRipple>)}
            </View>
          </View>
        </Card>
      </View>}
      {[...categories.filter(i=>i.seasonal&&i.seasonal.starts<Date.now()&&i.seasonal.ends>Date.now()),...categories.filter(i => i.parents.includes('bouncer')),...categories.filter(i => i.id=="temppob_other"),...categories.filter(i => i.id=="temppob_evo"),...categories.filter(i => i.id=="scatter")].filter(i => !hasChild(i)).filter(i=>!i.hidden&&i.id!="bouncerhost").map(cdata=><View style={{ padding: 4 }}>
        <Card noPad>
          <View>
            <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
              <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 24, color: theme.page_content.fg, paddingVertical: 4, textAlign: "center" }}>{cdata.name}</Text>
              <IconButton icon="map" color={theme.page_content.fg} onPress={()=>navigation.navigate("BouncerMap",{type:cdata.id})} />
            </View>
            {cdata?.seasonal && <>
              {/* <Text allowFontScaling={false} style={{...font("bold"),fontSize:20,color:theme.page_content.fg,textAlign:"center"}}>{category_data.id}</Text> */}
              <Text allowFontScaling={false} style={{ ...font(), textAlign: "center", color: theme.page_content.fg }}>{moment(cdata.seasonal.starts).format('L LT')} - {moment(cdata.seasonal.ends).format('L LT')}</Text>
              <Text allowFontScaling={false} style={{ ...font(), textAlign: "center", color: theme.page_content.fg }}>{t('bouncers:duration',{duration:moment.duration(moment(cdata.seasonal.starts).diff(moment(cdata.seasonal.ends))).humanize()})}</Text>
            </>}
            <View style={{flexDirection:"row",flexWrap:"wrap",justifyContent:"center"}}>
              {types.filter(i => i.category === cdata.id).filter(i=>!i.hidden&&!i.capture_only).map(i => <TouchableRipple onPress={()=>navigation.navigate("BouncerMap",{type:i.icon})}>
                <View key={i.id} style={{ padding: 4, width: 80, alignItems: "center", opacity: get(i)>0?1:0.4 }}>
                  <Image style={{ height: 32, width: 32, marginHorizontal: 8 }} source={getIcon(i.custom_icon ?? i.icon)} />
                  <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="middle" style={{ ...font("bold"), fontSize: 12, color: theme.page_content.fg }}>{i.name}</Text>
                  <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{get(i).toString()}</Text>
                </View>
              </TouchableRipple>)}
            </View>
          </View>
        </Card>
      </View>)}
    </ScrollView>
  );
}

About = () => {
  const { t, i18n } = useTranslation()
  const navigation = useNavigation()
  const { dark, theme, toggle } = useContext(ThemeContext)

  const [appLanguage, setAppLanguage] = useState(i18n.language)

  const language = [
    { lang: 'en', label: 'English ??' },
    { lang: 'ge', label: 'ქართული ??' }
  ]

  const changeLangHandler = async languageSelected => {
    setAppLanguage(languageSelected)
    await i18n.changeLanguage(languageSelected)
    await AsyncStorage.setItem('i18NextBusTimetable', languageSelected)
  }

  // Opens Feedback screen
  const feedbackHandler = () => navigation.navigate('Feedback')

  return (
    <View style={styles.container}>
      <Text style={[styles.info, { color: theme.text }]}>
        {t('about.info')}
      </Text>

      <Picker
        selectedValue={appLanguage}
        onValueChange={changeLangHandler}
        style={styles.picker}
      >
        {language.map(({ lang, label }, i) => {
          return (
            <Picker.Item
              key={i}
              value={lang}
              label={label}
              color={theme.text}
            />
          )
        })}
      </Picker>

      <View style={styles.wrap}>
        <Button
          onPress={feedbackHandler}
          text={t('about.feedbackButton')}
          buttonColor={theme.buttonColor}
          textColor={theme.buttonText}
          margin={30}
          paddingVertical={2}
          fontSize={14}
        />
        <Switch isOn={dark} onToggle={toggle} />
      </View>

      <Text style={{ color: theme.text }}>
        {t('about.madeBy')} {new Date().getFullYear()}
      </Text>
    </View>
  )
}

export default function ListItem({ i }) {
  var moment = useMoment();
  var theme = useSelector(i => i.themes[i.theme]);
  return <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
    <Card noPad>
      <View style={{ flexDirection: "column", width: "100%", alignItems: "center", paddingLeft: 8, paddingRight: 8, borderRadius: 0 }}>
        <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
          {i.clan && <MaterialCommunityIcons name="shield-outline" size={24} color={theme.page_content.fg} />}
          {i.title.match(/freeze tag store/i) && <MaterialCommunityIcons name="cart-outline" size={24} color={theme.page_content.fg} />}
          {i.title.match(/premium/i) && <MaterialCommunityIcons name="star-outline" size={24} color={theme.page_content.fg} />}
          {i.title.match(/zeeops/i) && <MaterialCommunityIcons name="briefcase-outline" size={24} color={theme.page_content.fg} />}
          {i.title.match(/munzee\s*support/i) && <MaterialCommunityIcons name="heart-outline" size={24} color={theme.page_content.fg} />}
          {i.title.match(/\btest\b/i) && <MaterialCommunityIcons name="briefcase-outline" size={24} color={theme.page_content.fg} />}

          {i.title.match(/giveaway/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('theunicorn_full')} />}
          {i.title.match(/magnetus/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('magnetus')} />}
          {i.title.match(/prize\s*wheel/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('prizewheel')} />}
          {i.title.match(/pimedus/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('pimedus')} />}
          {i.title.match(/space\s*coast/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('https://server.cuppazee.app/spacecoastgeostore.png')} />}
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 20, ...font("bold"), marginLeft: 4 }}>
            {i.short_title || i.title}
          </Text>
        </View>
        <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, fontWeight: "bold", marginLeft: 4 }}>
            {moment(i.time).format('L LT')}
          </Text>
        </View>
        {i.short_title && <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, marginLeft: 4 }}>
            {i.title}
          </Text>
        </View>}
        <View style={{ flexWrap: "wrap", flexDirection: "row", justifyContent: "center" }}>
          {
            i.items?.map(i => <InventoryItem key={i.icon} theme={theme} i={i} />)
          }
        </View>
      </View>
    </Card>
  </View>
}

render(){
        const { item, index, darkMode, lang, navigation } = this.props

        return (
            <View key={index} style={{
                height: 35,
                width: "100%",
                paddingLeft: 15,
                paddingRight: 15,
                marginBottom: 10
            }}>
                <View style={{
                    height: "auto",
                    width: "100%",
                    backgroundColor: darkMode ? "#171717" : "lightgray",
                    borderRadius: 10
                }}>
                    <TouchableHighlight underlayColor={"gray"} style={{
                        width: "100%",
                        height: "auto",
                        borderRadius: 10
                    }} onPress={() => {
                        navigationAnimation({ enable: true }).then(() => {
                            navigation.dispatch(StackActions.push("EventsInfoScreen", {
                                uuid: item.uuid
                            }))
                        })
                    }}>
                        <View style={{
                            width: "100%",
                            height: "auto",
                            flexDirection: "row",
                            justifyContent: "space-between",
                            paddingLeft: 10,
                            paddingRight: 10,
                            paddingTop: 9,
                            paddingBottom: 10
                        }}>
                            <Text style={{
                                color: darkMode ? "white" : "black",
                                fontSize: 13,
                                width: "45%"
                            }} numberOfLines={1}>
                                {this.state.eventText}
                            </Text>
                            <View style={{
                                flexDirection: "row",
                                paddingTop: 2
                            }}>
                                <Text style={{
                                    color: "gray",
                                    paddingRight: 10,
                                    fontSize: 12
                                }}>
                                    {new Date(item.timestamp * 1000).toLocaleDateString()} {new Date(item.timestamp * 1000).toLocaleTimeString()}
                                </Text>
                                <Ionicon name="chevron-forward-outline" size={15} color="gray" style={{
                                    marginTop: 0
                                }} />
                            </View>
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }

render() {

        if ((this.state.currentProgress > 0 && this.state.currentProgress === this.state.totalItems) ||
            (this.state.animateProgress === 1 && this.state.totalItems === 0)) {

            if (this.props.navigation) {
                this.navigateToDashboard()
            } else {
                this.props.dismissSyncDialog()
            }
        }

        var calType = "";

        if (this.state.user.loginType === Utils.GOOGLE_LOGIN_TYPE) {
            calType = "Google"
        } else if (this.state.user.loginType === Utils.MICROSOFT_LOGIN_TYPE) {
            calType = "Microsoft"
        } else if (Utils.nonSocialLogin(this.state.user.loginType)) {
            calType = "Firebase"
        }

        return (
            <View style={styles.parent_setup_container}>

                <View style={styles.setup_container}>

                    <View style={styles.sync_header_container}>
                        <View style={styles.sync_icon_view}>
                            {this.state.user.loginType === Utils.GOOGLE_LOGIN_TYPE &&
                                <Image source={require('../../../assets/icons/ic_google_plus_logo.png')} style={styles.sync_icon_style_logo} />
                            }
                            {this.state.user.loginType === Utils.MICROSOFT_LOGIN_TYPE &&
                                <Image source={require('../../../assets/icons/ic_microsoft.png')} style={styles.sync_icon_style_logo} />
                            }
                            {(Utils.nonSocialLogin(this.state.user.loginType)) &&
                                <Image source={require('../../../assets/icons/ic_firebase.png')} style={styles.sync_icon_style_logo} />
                            }
                        </View>
                    </View>
                    <View style={styles.sync_label_view}>
                        <Text style={styles.app_label}>Please wait</Text>
                    </View>
                    <View style={styles.sync_label_view}>
                        <Text style={styles.app_label}>Syncing your {calType}  calendar </Text>
                    </View>
                    <View style={styles.sync_label_view}>
                        <Progress.Bar
                            progress={this.state.animateProgress}
                            size={10}
                            indeterminate={this.state.indeterminate}
                            width={200}
                            height={10} />
                    </View>
                </View>
            </View>
        )
    }

export default function ClanScreen({ route }) {
  var theme = useSelector(i => i.themes[i.theme]);
  var dark = false;
  var level_colors = useLevelColours();
  var username = route.params.username;
  const user_id = useAPIRequest({
    endpoint: 'user',
    data: { username },
    function: i=>i?.user_id
  })
  var data = useAPIRequest(user_id?{
    endpoint: `user/potm/sept2020/v1`,
    data: {
      user_id
    },
    cuppazee: true
  }:null)
  if(!data) 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={{ width: 600, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", padding: 4, paddingBottom: 92 }}
        style={{ flex: 1, backgroundColor: theme.page.bg }}>
        <View style={{ padding: 4 }}>
          <Card noPad>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <View style={{ padding: 8, flex: 1, justifyContent: "center" }}>
                <Text allowFontScaling={false} style={{ fontSize: 20, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>POTM Sept 2020 - Scatters</Text>
                <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
                  {count(data,"pin").map((i,_,array) => <OverviewItem i={i} total={array.length} />)}
                </View>
              </View>
              <View style={{alignSelf:"stretch",borderTopRightRadius:8,borderBottomRightRadius:8,borderLeftWidth:dark?2:0,borderLeftColor:dark?level_colors[Math.min(5,Math.floor(data.length/5))].fg:undefined,backgroundColor:dark?undefined:level_colors[Math.min(5,Math.floor(data.length/5))].bg,width:80,minHeight:80,alignItems:"center",justifyContent:"center"}}>
                <Text allowFontScaling={false} style={{color:level_colors[Math.min(5,Math.floor(data.length/5))].fg,fontSize:24,...font("bold")}}>{data.length}</Text>
                <Text allowFontScaling={false} style={{color:level_colors[Math.min(5,Math.floor(data.length/5))].fg,fontSize:16,...font()}}>/100</Text>
              </View>
            </View>
          </Card>
        </View>
      </ScrollView>
      <UserFAB username={username} user_id={user_id} />
    </View>
  );
}

GDPRScreen = memo(({ navigation, route }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const [lang, setLang] = useMMKVString("lang", storage)
    const [gdpr, setGdpr] = useState("")
    const [isLoading, setIsLoading] = useState(true)
    const isMounted = useMountedState()
    
    useEffect(() => {
        fetchGDPRInfo().then((info) => {
            if(isMounted()){
                setGdpr(JSON.stringify(info, null, 2))
                setIsLoading(false)
            }
        }).catch((err) => {
            console.log(err)

            showToast({ message: err.toString() })
        })
    }, [])

    return (
        <>
            <View style={{
                flexDirection: "row",
                justifyContent: "flex-start",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                <TouchableOpacity style={{
                    marginTop: Platform.OS == "ios" ? 17 : 4,
                    marginLeft: 15,
                }} onPress={() => navigation.goBack()}>
                    <Ionicon name="chevron-back" size={24} color={darkMode ? "white" : "black"}></Ionicon>
                </TouchableOpacity>
                <Text style={{
                    color: darkMode ? "white" : "black",
                    fontWeight: "bold",
                    fontSize: 24,
                    marginLeft: 10,
                    marginTop: Platform.OS == "ios" ? 15 : 0
                }}>
                    {i18n(lang, "showGDPR")}
                </Text>
            </View>
            <ScrollView style={{
                height: "100%",
                width: "100%",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                {
                    isLoading ? (
                        <ActivityIndicator size={"small"} color={darkMode ? "white" : "black"} style={{
                            marginTop: "70%"
                        }} />
                    ) : (
                        <Text style={{
                            color: darkMode ? "white" : "black",
                            padding: 22
                        }}>
                            {striptags(gdpr)}    
                        </Text>
                    )
                }
            </ScrollView>
        </>
    )
})

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>
  );
}