react-native Image JavaScript Examples

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

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

6 votes

function ImageBackgroundBase(props) {
  const {style, uri} = props;

  return (
    <Image
        // resizeMode={'contain'}
      style={[style]}
      blurRadius={2}
      source={uri}
      backgroundColor={'rgb(0,0,0)'}
      opacity={0.5}
    />
  );
}

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

6 votes

OnboardingScreen = ({ navigation }) => {
    return (
        <Onboarding
            SkipButtonComponent={Skip}
            NextButtonComponent={Next}
            DoneButtonComponent={Done}
            DotComponent={Dots}
            onSkip={() => navigation.replace("Resources")}
            onDone={() => navigation.replace("Resources")}
            pages={[
                {
                    backgroundColor: '#000',
                    image: <Image source={require('../assets/image1.png')}
                        style={{ width: 334, height: 317 }} />,
                    title: 'Do more meaningful work',
                    subtitle: 'We help you find the best courses, tutorials online.',
                },
                {
                    backgroundColor: '#000',
                    image: <Image source={require('../assets/image3.png')}
                        style={{ width: 334, height: 317 }}
                    />,
                    title: 'Share Your Favorites',
                    subtitle: 'Share Your Thoughts With Similar Kind of People',
                },
                {
                    backgroundColor: '#000',
                    image: <Image source={require('../assets/image2.png')}
                        style={{ width: 334, height: 325 }} />,
                    title: 'Become The Star',
                    subtitle: "Let The Spot Light Capture You",
                },
            ]}
        />
    );
}

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

6 votes

render() { 
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.logoContainer}>
          <Image style={styles.logo} source={require('../../assets/logo_MyFood.png')}/>
        </View>
        <View>
            <LoginForm navigation={this.props.navigation} />
        </View>
        <View style={{ flex : 1 }} />
      </KeyboardAvoidingView>
    );
  }

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

Source File: home.js From Solution-Starter-Kit-Disasters-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}>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>
)

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

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

6 votes

export default function CompetitionImage({ type, count, viewMode }) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  if(viewMode==="list") {
    return <View style={{ flexDirection: "row", alignItems: "center", paddingVertical: 2, width: 400, maxWidth: "100%", opacity: (count ?? 1) ? 1 : 0.2 }}>
      <Image style={{ height: 32, width: 32, marginHorizontal: 4 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
      <Text style={{flex : 1, marginHorizontal: 4, fontWeight: "bold"}}>{count !== undefined ? `${count}x ` : ""}{type.name || t('inventory:unknown_name')}</Text>
      <Text style={{marginHorizontal: 4}}>{(count ?? 1) * (type.health ? type.health : -type.damage)} HP</Text>
    </View>
  }
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={type.icon} style={{ padding: 2, alignItems: "center", opacity: (count ?? 1) ? 1 : 0.2 }}>
          <Image style={{ height: 32, width: 32 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
          <Text allowFontScaling={false} style={{ ...font(), color: theme.page_content.fg, fontSize: 16 }}>{(count ?? (type.health ? type.health : -type.damage)) || "-"}</Text>
        </View>
      </TouchableRipple>
    }
    contentStyle={{backgroundColor:theme.page_content.bg}}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <Image style={{ height: 48, width: 48 }} source={getIcon(type.icon?.includes?.('NA.png') ? 'https://server.cuppazee.app/missing.png' : type.icon)} />
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }}>{count !== undefined ? `${count}x ` : ""}{type.name || t('inventory:unknown_name')}</Text>
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }}>{(count ?? 1) * (type.health ? type.health : -type.damage)} HP</Text>
    </View>
  </Menu>;
}

Source File: MessageComponent.js From react-native-todolist with MIT License

6 votes

renderSend(props) {
    return (
      <Send
        {...props}
        containerStyle={styles.sendContainer}>

        <Image source={require('../../../assets/icons/send.png')}
          style={{
            marginTop: 0,
            width: 40,
            height: 40
          }} />
      </Send>
    );
  }

Source File: wallpaper-app-container.js From React-Messenger-App with MIT License

6 votes

renderItem( image ) {
        console.log( 'Inside renderitem' );
        return (
            <View style={{ height, width }}>
                    <Image
                        style = { { flex: 1, height: null, width: null}}
                        source = {{ uri: image.urls.regular }}
                    />
            </View>
        );
      }

Source File: notificationCard.js From Baku with GNU General Public License v3.0

6 votes

render() {
    return (
      <View style={Styles.notificationCardContainer}>
        <View style={{
          flexDirection: 'row',
          margin: 5,
          justifyContent: 'space-between'}}>

          <Image style={Styles.image_icon}
            source={{uri: this.props.detail.user_avatar}} />

          <View style={{
            flexDirection: 'column',
            marginHorizontal: 10,
            flex: 1}}>
            <Text style={{fontSize: 20}}>
              {this.props.detail.username} {this.type.followText}
            </Text>
            <Text >
              #Timestamp#
              {/* TODO add time here */}
            </Text>
          </View>

          <AwesomeIcon
            name={this.type.followIcon}
            size={35}
          ></AwesomeIcon>
        </View>
      </View>
    );
  }

Source File: MainSliderItem.js From haven with MIT License

6 votes

render() {
    const { source, onLoadEnd } = this.props;
    return (
      <TouchableWithoutFeedback onPress={this.handlePress}>
        <View style={styles.wrapper}>
          <Image style={styles.image} source={{ uri: source.image }} onLoadEnd={onLoadEnd} />
        </View>
      </TouchableWithoutFeedback>
    );
  }

Source File: index.js From CoughCheckApp with MIT License

6 votes

function Index(props) {
	return (
		<View style={styles.container}>
			<View style={styles.rectangle1}>
				<View style={styles.rectangle2}>
					<View style={styles.group3}>
						<Image
							source={require('./assets/images/e59eac52ff951c3737576fd268f1382ec442d99e.png')}
							resizeMode="cover"
							style={styles.bitmap1}
						></Image>
						<Text style={styles.largeTitle}>Instructions</Text>
						<Text style={styles.tapTheAboveMic}>
							1. Tap the above microphone to start recording.{'\n'}
							{'\n'}2. Cough in the microphone for 30 seconds.{'\n'}
							{'\n'}3. Start and stop as many times as you like to give us as much
							recordable audio as possible
						</Text>
						<View style={styles.bitmap2Row}>
							<Image
								source={require('./assets/images/a2511cca2ac07d9c98a4b38515ca431876c529c2.png')}
								resizeMode="cover"
								style={styles.bitmap2}
							></Image>
							<Text style={styles.headline}>Don’t show this again</Text>
						</View>
					</View>
				</View>
			</View>
		</View>
	)
}

Source File: Footer.js From covid-alert with Apache License 2.0

6 votes

FooterComponent = () => {
  const { t } = useTranslation()

  const openInBrowser = useCallback(url => {
    Linking.openURL(url).catch(err => console.error("Couldn't load page", err))
  }, [])

  return (
    <TouchableOpacity
      style={d(styles.footer)}
      onPress={() => openInBrowser('https://openmined.org')}>
      <Text style={styles.footerText}>{t('volunteers')}</Text>
      <Image
        style={styles.openMinedLogo}
        source={require('../../../../assets/images/openmined-logo.png')}
        resizeMode="contain"
      />
    </TouchableOpacity>
  )
}

Source File: Loading.js From universal-verifier-app with GNU General Public License v3.0

6 votes

function Loading() {
  const {colors, isDark} = useTheme();

  return (
    <View style={styles.container} backgroundColor={colors.primary}>
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,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',
        }}
      />
    </View>
  );
}

Source File: ActionSheetCell.js From RRWallet with MIT License

6 votes

render() {
    const { containerStyle, label, placeholder, borderBottom } = this.props;

    return (
      <View style={styles.wrap}>
        <TouchableWithoutFeedback onPress={this.onCellPress}>
          <View style={[styles.container, borderBottom ? styles.containerBorder : {}, containerStyle]}>
            {label && label.length > 0 && <Text style={styles.label}>{label}</Text>}
            <Text
              style={[
                styles.selectTextView,
                !!this.state.value ? styles.selectTextView_selected : styles.selectTextView_placeholder,
              ]}>
              {this.state.value || placeholder}
            </Text>
            <Image source={require("@img/icon/arrow-right.png")} />
          </View>
        </TouchableWithoutFeedback>

        <ActionSheet
          options={this.state.options}
          cancelButtonIndex={this.state.cancelIndex}
          onPress={this.onActionSheetItemPress}
          ref={this.handleActionSheetRef}
        />
      </View>
    );
  }

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

5 votes

export default function TabNavigator({NavigateToStoryCamera}) {
  const Tab = createBottomTabNavigator();
  return (
    <React.Fragment>
      <Tab.Navigator
        tabBarOptions={{
          showLabel: false,
          showIcon: true,
          style: {
            backgroundColor: colors.bottomBackGround,
            borderTopColor: colors.seperatorLineColor,
          },
        }}
        screenOptions={({route}) => ({
          tabBarIcon: ({focused}) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? images.home_selected : images.home;
            } else if (route.name === 'Search') {
              iconName = focused ? images.search_selected : images.search;
            } else if (route.name === 'AddPost') {
              iconName = focused ? images.add_selected : images.add;
            } else if (route.name === 'Activity') {
              iconName = focused ? images.activity_selected : images.activity;
            } else if (route.name === 'Profile') {
              iconName = focused ? images.profile_selected : images.profile;
            }

            return <Image style={palette.header.image} source={iconName} />;
          },
        })}>
        <Tab.Screen name="Home" component={homeNavigator} />
        <Tab.Screen name="Search" component={searchNavigator} />
        <Tab.Screen name="AddPost" component={addPostNavigator} />
        <Tab.Screen name="Activity" component={activityNavigator} />
        <Tab.Screen name="Profile" component={profileNavigator} />
      </Tab.Navigator>
    </React.Fragment>
  );
}

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

5 votes

function JobDetail(props) {

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

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

    };

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

                </View>


                <View>
                    <Image
                        source={{ uri: `${Company_image}` }}
                        style={{ width: 300, height: 230, marginLeft: 30, }}
                    />
                </View>
                <View>
                    <RenderHtml
                        tagsStyles={tagsStyles}
                        contentWidth={width}
                        source={source}
                    />
                </View>
                <View style={[{ width: "90%", marginTop: 5, marginBottom: 25, borderRadius: 10, alignItems: 'center' }]}>
                    <Button
                        title="Apply"
                        color="#002223"
                        style={[{ borderRadius: 100, }]}
                        onPress={() => Linking.openURL(apply_link)}
                    />
                </View>

            </ScrollView>
        </View >

    )
}

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

5 votes

_renderItem({ item, index }) {
    const { 
      containerStyle, 
      lastItemStyle,
      imageStyle, 
      textStyle, 
      counterStyle,
      priceStyle } = styles;

    return (
    <View style={(index + 1 === data.length) ? lastItemStyle : containerStyle}>
      <Image source={item.image} style={imageStyle} />
      
      <View style={textStyle}>
        <Text style={{ color: '#2e2f30' }}>{item.name}</Text>
        <View style={priceStyle}>
          <Text style={{ color: '#2e2f30', fontSize: 12 }}>${item.price}</Text>
        </View>
      </View>

      <View style={counterStyle}>
        <Icon.Button 
          name="ios-remove" 
          size={25} 
          color='#fff' 
          backgroundColor='#fff' 
          style={{ borderRadius: 15, backgroundColor: '#bbb', height: 30, width: 30 }} 
          iconStyle={{ marginRight: 0 }}
        />

        <Text>{item.amountTaken}</Text>

        <Icon.Button 
          name="ios-add" 
          size={25} 
          color='#fff' 
          backgroundColor='#fff' 
          style={{ borderRadius: 15, backgroundColor: '#bbb', height: 30, width: 30 }} 
          iconStyle={{ marginRight: 0 }}
        />

      </View>
    </View>);
  }

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

5 votes

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

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

5 votes

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

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

5 votes

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

react-native#Image JavaScript Examples