react-native#View JavaScript Examples

The following examples show how to use react-native#View. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: StoryListItem.js From react-native-instagram-clone with MIT License

6 votes

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

Example #2

Source File: index.js From bluezone-app with GNU General Public License v3.0

6 votes

function CountBlueZoner(props) {
  const {backgroundColor, countBlueZone} = props;
  return (
    <View style={styles.infoBluezone}>
      <View style={[styles.infoBluezone1, {backgroundColor: backgroundColor}]}>
        <Text style={styles.infoItemValue}>{countBlueZone}</Text>
      </View>
    </View>
  );
}

Example #3

Source File: BlogDetail.js From Get-Placed-App with MIT License

6 votes

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 >

    )
}

Example #4

Source File: modals.js From Spring2020_MyFood_FrontEnd with GNU General Public License v3.0

6 votes

ScrollModal = props  => {

  return (
        <Modal visible = {props.visible}>
            <View style = {styles.myModal}>
                <Button title = "go back" onPress={props.onClose}/>
            </View>
        </Modal>
  );
}

Example #5

Source File: home.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0

6 votes

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

Example #6

Source File: chat.js From Solution-Starter-Kit-Disasters-2020 with Apache License 2.0

6 votes

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

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

Example #7

Source File: CardProduct.js From Alfredo-Mobile with MIT License

6 votes

CardProduct = (props) => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)
  const {item, ...restProps} = props
  const navigation = useContext(NavigationContext)

  return (
    <TouchableOpacity activeOpacity={0.9} style={styles.card} {...restProps}>
      <Image source={{ uri: item?.thumbnail }} style={styles.thumb} resizeMode="cover" />
      <View style={styles.content}>
        <Text style={styles.price}>{'Rp' + new Format().formatMoney(item?.price ?? 0)}</Text>
        <Text style={styles.title}>{item?.title}</Text>
      </View>
    </TouchableOpacity>
  )
}

Example #8

Source File: Tile.js From Legacy with Mozilla Public License 2.0

6 votes

export function NewTile({data,date,type,theme,header,extraText}) {
  var {t} = useTranslation();
  // var types = [
  //   {label:"R",type:"flatrob",color:"rgb(0, 148, 68)"},
  //   {label:"M",type:"flatmatt",color:"rgb(237, 32, 36)"},
  //   {label:"L",type:"flatlou",color:"rgb(235, 0, 139)"},
  //   {label:"H",type:"flathammock",color:"rgb(35, 117, 245)"},
  // ]
  // {label:"QRewZee",type:"qrewzee",color:"rgb(235, 105, 42)"},
  if(type=="alt") {
    return <View style={{flex:1,backgroundColor:theme.page_content.bg,borderWidth:1,borderColor:'#d3d3d3',height:60,justifyContent:"center",alignItems:"center",paddingBottom:2}}>
      <View style={{flexDirection:"row"}}>
        <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font("bold"),fontSize:12,textAlignVertical:"center"}}>{(date||1).toString()}</Text>
      </View>
      {/* <View style={{flexDirection:"row"}}>
        {types.map(i=>data.includes(i.label)?<Text allowFontScaling={false} style={{color:i.color,...font("bold"),fontSize:12,textAlignVertical:"center",letterSpacing:1}}>{i.label}</Text>:null)}
      </View> */}
      <View style={{flexDirection:"row"}}>
        <Text allowFontScaling={false} style={{color:data.includes('Z')?"rgb(235, 105, 42)":"rgb(150, 150, 150)",...font("bold"),fontSize:10,textAlignVertical:"center"}}>{data.includes('Z')?"QRewZee":t('calendar:off')}</Text>
      </View>
    </View>
  }
  return <View style={{flex:1,backgroundColor:data.includes('Z')?"rgb(235, 105, 42)":"black",borderWidth:1,borderColor:'#d3d3d3',height:header?56:40}}>
    {/* <ImageBackground source={u(data.includes('R')?'R':null)} style={{flex:1}}>
      <ImageBackground source={u(data.includes('M')?'M':null)} style={{flex:1}}>
        <ImageBackground source={u(data.includes('L')?'L':null)} style={{flex:1}}>
          <ImageBackground source={u(data.includes('H')?'H':null)} style={{flex:1}}>
            <ImageBackground source={u(data.includes('Z')?'QRewZeeOn':'QRewZeeOff')} style={{flex:1}}> */}
              <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                {extraText&&<Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{extraText}</Text>}
                <Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{(date||"1").toString()}</Text>
              </View>
            {/* </ImageBackground>
          </ImageBackground>
        </ImageBackground>
      </ImageBackground>
    </ImageBackground> */}
  </View>
}

Example #9

Source File: activityScreen.js From react-native-instagram-clone with MIT License

5 votes

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

Example #10

Source File: Input.js From react-native-select-dropdown with MIT License

5 votes

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

Example #11

Source File: index.js From bluezone-app with GNU General Public License v3.0

5 votes

renderItem({item}) {
    return (
      <View style={styles.item}>
        <Text style={styles.date} text={item.dateStr} />
        <MediumText style={styles.numberContact} text={item.numberContact} />
      </View>
    );
  }