react-native#Image JavaScript Examples
The following examples show how to use
react-native#Image.
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 ImageBackgroundBase(props) {
const {style, uri} = props;
return (
<Image
// resizeMode={'contain'}
style={[style]}
blurRadius={2}
source={uri}
backgroundColor={'rgb(0,0,0)'}
opacity={0.5}
/>
);
}
Example #3
| 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",
},
]}
/>
);
}
Example #4
| 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>
);
}
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: 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>
)
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: 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>;
}
Example #9
| 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>
);
}
Example #10
| 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>
);
}
Example #11
| 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>
);
}
Example #12
| 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>
);
}
Example #13
| 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>
)
}
Example #14
| 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>
)
}
Example #15
| 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>
);
}
Example #16
| 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>
);
}
Example #17
| 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>
);
}
Example #18
| 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 >
)
}
Example #19
| 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>);
}
Example #20
| 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>
)
Example #21
| 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>
)
}
Example #22
| 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>
}
