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

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

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 >

    )
}

render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
                this.camera = ref;
              }
          }
          autoFocus={true}
          captureAudio={false}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={this.state.flashMode}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row' }}>
          <View style={{ flex: 1, flexDirection: 'row', }}>
            <TouchableOpacity onPress={this.toggleFlash} style={styles.flash}>
              {this.state.flashMode == RNCamera.Constants.FlashMode.off
                ? <FontAwesomeIcon icon={ faBolt } style={{color: "black"}} />
                : <FontAwesomeIcon icon={ faBolt } style={{color: "yellow"}} />
              }
            </TouchableOpacity>
          </View>
          <View style={{ flex: 2, flexDirection: 'row', }}>
            <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.scan}>
              <Text>Scan</Text>
            </TouchableOpacity>
          </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>
)

Message = (props) => {
  const style = props.fromInput ? styles.myText : styles.waText;

  return (
    <View style={styles.messageContainer}>
      <Text style={style}>{props.text}</Text>
    </View>
  );
}

Button = (props) => {
  const { textStyle, text, ...restProps } = props

  return (
    <TouchableOpacity activeOpacity={0.9} {...restProps}>
      <Text style={textStyle}>{text}</Text>
    </TouchableOpacity>
  )
}

// const Stack = createSharedElementStackNavigator();

function RedirectScreen() {
  var nav = useNavigation();
  var users = useSelector(i => i.userBookmarks);
  if (users && users[0]) {
    nav.replace('UserDetails', { username: users[0].username });
  }
  return <Text>_redirect</Text>;
}

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

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

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

export default function JobList(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/blog/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Blog-Detail", { data: data })
    }

    const renderData = (item) => {
        var date = new Date(`${item.post_date}`)
        return (
            <>
                <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                    <View style={{ flex: 1 }}>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#000", fontSize: 16, marginLeft: 15, }}>
                            {item.title}
                            <Text style={{ fontSize: 13, color: '#808080' }}>    -   ({date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text>
                        </Text>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#808080", fontSize: 12, marginLeft: 17, }}>
                            {item.snippet}
                        </Text>

                    </View>
                </Card>
            </>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            />
        </View>


    )
}

render() {
      const { navigate } = this.props.navigation;
  return (
    <View style={styles.container}>
{/* Top Row of App */}

{/* First Row of Fridge */} 
        <View style={styles.fridgeGrid}>
          <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
            <TouchableOpacity onPress={() => { navigate("Inside your Fridge") }} style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Freezer</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Meat</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
{/* Second Row of Fridge */} 
        <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Produce</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Non-Perishables</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
{/* Third Row of Fridge */}      
        <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Perishables</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
          <Text style={{fontSize: 24}}>Dairy</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
        
    </View>
    <ScrollModal visible={this.state.isFreezerOn} onClose={this.toggleModal}> </ScrollModal>
    </View>
          
  );
}

Loading = () => (
  <View style={styles.center}>
    <Image style={styles.image}
      source={require('../images/logo-512.png')}
    />
    <Text style={styles.title}>loading...</Text>
  </View>
)

Account = (props) => {
  const guestView = () => {
    return (
      <ScrollView contentContainerStyle={styles.content}>
        <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('LoginScreen')}>
              <Text style={styles.btnAuthLabel}>Login</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('RegisterScreen')}>
              <Text style={styles.btnAuthLabel}>Register</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  const userView = () => {
    const { data } = props.profile

    return (
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi, {data?.username}!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('OrderList')}>
              <Text style={styles.btnAuthLabel}>Orders</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={[styles.btnAuth, apply('bg-red-500')]} activeOpacity={0.9} onPress={() => props.doLogout()}>
              <Text style={styles.btnAuthLabel}>Logout</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      {props.user ? userView() : guestView()}
    </SafeAreaView>
  )
}

render() {
        if (this.state.question === 0) {
    

            return(
                <>
                    <View>
                        <Text style={this.state.styles.title}>Quiz!</Text>
                    </View>
                    <Button
                        onPress={this.addQuestion.bind(this)}
                        title="Ready to take this Survey Quiz?"
                        color="#6a0dad"
                        />

                </>
            );
        } else if (this.state.question > this.state.questions.length) {
         

            return(
                <>
                    <View>
                        <Text style={this.state.styles.title}>Here are your results.</Text>
                    </View>
                    <View>
                        <Text style={this.state.styles.title}>{(this.state.correct / this.state.questions.length) * 100}%</Text>
                    </View>
                    <View>
                        <Text>You have gotten {this.state.correct} out of {this.state.questions.length} correct.</Text>
                    </View>
                </>
            );
        } else {
           

            return(
                <>

<View>
                        <Text style={this.state.styles.question}>{this.state.questions[this.state.question - 1].question}</Text>
                    </View>


                  <View>
                        <Button
                            onPress={this.addQuestion.bind(this)}
                            title={this.state.questions[this.state.question - 1].wrongChoice}
                            accessibilityLabel="Choose"
                            style={this.state.styles.answer}
                            />
                    </View>
                   
                    <View>
                        <Button
                            onPress={this.correctChoice.bind(this)}
                            title={this.state.questions[this.state.question - 1].correctChoice}
                            accessibilityLabel="Choose"
                            style={this.state.styles.answer}
                            />
                    </View>
                  
                </>
            );
        }
        
    }

export default function Calendar({style,month,year,theme,type="default"}) {
  const {t} = useTranslation();
  const moment = useMoment();
  const now = moment();
  const monthStart = moment({date:1,month:month??now.month(),year:year??now.year()}).day();
  const monthEnd = moment({date:1,month:month??now.month(),year:year??now.year()}).add(1,"month").subtract(1,'day').date();
  const newDesign = (month > 5 && year === 2020) || year > 2020;
  const Tile = newDesign?NewTile:OldTile

  var grid = []
  var finishedGrid = false;
  for(var i = -1;!finishedGrid;i++) {
    let row = [];
    for(var j = 1;j <= 7;j++) {
      if((7*i)+j<monthStart) row.push(null)
      else if((7*i)+j-monthStart>=monthEnd) row.push(null)
      else row.push((7*i)+j-monthStart+1)
    }
    if(row.find(i=>i)) grid.push(row);
    if((7*i)+8-monthStart>=monthEnd) finishedGrid = true;
  }

  var types = [
    {label:"Rob",type:"flatrob",color:"rgb(0, 148, 68)"},
    {label:"Matt",type:"flatmatt",color:"rgb(237, 32, 36)"},
    {label:"Lou",type:"flatlou",color:"rgb(235, 0, 139)"},
    {label:"Hammock",type:"flathammock",color:"rgb(35, 117, 245)"},
    {label:"QRewZee",type:"qrewzee",color:"rgb(235, 105, 42)"},
  ]

  return <View style={style}>
    {type=="default"&&!newDesign&&<View style={{flexDirection:"row"}}>
      {types.map(i=><View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3',backgroundColor:i.color,justifyContent:"center",alignItems:"center",height:60}}>
        <Image source={getIcon(i.type)} style={{height:32,width:32}}/>
        <Text allowFontScaling={false} style={{fontSize:12,color:"white"}}>{i.label}</Text>
      </View>)}
    </View>}
    <View style={{flexDirection:"row"}}>
      {[
        t("calendar:days.monday"),
        t("calendar:days.tuesday"),
        t("calendar:days.wednesday"),
        t("calendar:days.thursday"),
        t("calendar:days.friday"),
        t("calendar:days.saturday"),
        t("calendar:days.sunday")
      ].map(i=><View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3',justifyContent:"center",alignItems:"center",height:40}}>
        <Text allowFontScaling={false} style={{fontSize:16,color:theme.page_content.fg}}>{i}</Text>
      </View>)}
    </View>
    {grid.map(row=><View style={{flexDirection:"row"}}>
      {row.map(day=>day?<Tile theme={theme} type={type} data={CalData?.[year??now.year()]?.[month??now.month()]?.[day-1]??''} date={day}/>:<View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3'}}/>)}
    </View>)}
  </View>
}