react-native-elements#Image JavaScript Examples
The following examples show how to use
react-native-elements#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: input.playground.jsx From playground with MIT License | 5 votes |
|
ImagePlayground = () => {
const params = useView({
componentName: "Image",
props: {
containerStyle: {
type: PropTypes.Object,
value: `{}`,
},
ImageComponent: {
type: PropTypes.ReactNode,
value: null,
description: "Specify a different component as the Image component.",
},
onLongPress: {
type: PropTypes.Function,
value: `() => console.log("onLongPress()")`,
},
onPress: {
type: PropTypes.Function,
value: `() => console.log("onPress()")`,
},
PlaceholderContent: {
type: PropTypes.ReactNode,
value: null,
},
placeholderStyle: {
type: PropTypes.Object,
value: `{}`,
},
transition: {
type: PropTypes.Boolean,
value: false,
},
transitionDuration: {
type: PropTypes.Number,
value: 1000,
},
source: {
type: PropTypes.Object,
value: `{uri: "https://user-images.githubusercontent.com/5962998/65694309-a825f000-e043-11e9-8382-db0dba0851e3.png"}`,
},
style: {
type: PropTypes.Object,
value: `{ width: 200, height: 200 }`,
},
},
scope: {
Image,
},
imports: {
"react-native-elements": {
named: ["Image"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #2
| Source File: index.js From spree-react-native with MIT License | 5 votes |
|
Item = ({ item }) => {
return (
<TouchableOpacity onPress={() => console.log(item)} style={styles.flatListImageItemContainer}>
<Image source={item.source} style={styles.flatListImageItem} />
</TouchableOpacity>
)
}
Example #3
| Source File: index.js From spree-react-native with MIT License | 5 votes |
|
FlatListImageItem = ({ item, onPress, imageStyle, itemContainerStyle }) => (
<TouchableOpacity onPress={onPress} style={itemContainerStyle}>
<Image source={item.source} style={{ width: imageStyle.width, height: imageStyle.height }} />
</TouchableOpacity>
)
Example #4
| Source File: HomeScreen.js From hero with MIT License | 4 votes |
|
HomeScreen = ({ navigation }) => {
const [XMen, popularHeroes, villains] = useContext(HeroesContext);
const [loading, setLoading] = useState(false);
const insets = useSafeAreaInsets();
const scrollY = new Animated.Value(0);
const translateY = scrollY.interpolate({
inputRange: [40, 100 + insets.top],
outputRange: [40, insets.top - 100],
extrapolate: "clamp",
});
const search = async (item) => {
try {
setLoading(true);
const searchResponse = await fetch(
`https://superheroapi.com/api/${api.key}/${item.id}/`
);
const characterResponse = await fetch(
`https://comicvine.gamespot.com/api/characters/?api_key=${apiComicVine.key}&filter=name:${item.title},publisher${item.publisher}&field_list=deck,publisher,first_appeared_in_issue&format=json`
);
const hero = await searchResponse.json();
const characterInfo = await characterResponse.json();
summary = characterInfo.results[0].deck;
firstIssue = characterInfo.results[0].first_appeared_in_issue;
publisher = characterInfo.results[0].publisher.name;
const firstComicResponse = await fetch(
`https://comicvine.gamespot.com/api/issue/4000-${firstIssue.id}/?api_key=${apiComicVine.key}&format=json`
);
const firstComicInfo = await firstComicResponse.json();
firstIssueURL = firstComicInfo.results.image.original_url;
navigation.navigate("Character", {
hero: hero,
image: item.image,
// publisher: item.publisher,
comicPicture: comicPicture,
summary: summary,
firstIssue: firstIssue,
firstIssueURL: firstIssueURL,
publisher: publisher,
});
// setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}
};
const _renderItem = ({ item, index }) => {
return (
<Pressable
key={index}
style={({ pressed }) => [
styles.heroCard,
{ opacity: pressed ? 0.8 : 1.0 },
]}
style={styles.heroCard}
>
<TouchableScale
delayPressIn={50}
activeScale={0.9}
tension={160}
friction={2}
onPress={() => {
search(item);
// console.log(item.id);
}}
>
<MaskedView
maskElement={
<SquircleView
style={StyleSheet.absoluteFill}
squircleParams={{
cornerRadius: 50,
cornerSmoothing: 1,
fillColor: "pink",
}}
/>
}
>
<Image
source={item.image}
resizeMode="cover"
PlaceholderContent={<ActivityIndicator />}
style={{
width: "100%",
height: "100%",
}}
/>
<View
style={{
flex: 1,
position: "absolute",
bottom: -5,
padding: 30,
width: "100%",
justifyContent: "center",
borderRadius: 20,
}}
>
<Text
style={{
...styles.h4,
fontSize: 20,
color: COLORS.beige,
textShadowColor: "rgba(0, 0, 0, 1)",
textShadowOffset: { width: -1, height: 1 },
textShadowRadius: 5,
}}
>
{item.title}
</Text>
</View>
</MaskedView>
</TouchableScale>
</Pressable>
// </Animated.View>
);
};
useEffect(() => {
setLoading(false);
}, []);
useEffect(() => {
const unsubscribe = navigation.addListener("blur", () => {
// Screen was blurred
// Do something
setLoading(false);
});
return unsubscribe;
}, [navigation]);
return (
<>
<View style={styles.appContainer}>
<StatusBar
translucent
backgroundColor="transparent"
barStyle="dark-content"
/>
<SafeAreaView
style={{
flex: 1,
width: Dimensions.get("window").width,
}}
forceInset={{ top: "always" }}
>
<Animated.View
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
zIndex: 10,
height: 100,
transform: [{ translateY: translateY }],
}}
>
<View style={styles.header}>
<View style={{ justifyContent: "flex-end" }}>
<Text style={styles.appTitle}>hero</Text>
<Text
style={{ ...styles.p, fontSize: 7, marginTop: -2, left: -2 }}
>
the Superhero Encyclopedia
</Text>
</View>
</View>
</Animated.View>
<ScrollView
contentContainerStyle={{
paddingBottom: 80,
width: Dimensions.get("window").width,
}}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
scrollEventThrottle={6}
>
<View style={styles.popularContainer}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
}}
>
<Text
style={{
...styles.h4,
marginBottom: 10,
paddingLeft: 15,
}}
>
Popular
</Text>
<Icon
name="trending-up"
type="feather"
color={COLORS.navy}
size={30}
iconStyle={{ bottom: 2, paddingLeft: 5 }}
/>
</View>
<Carousel
data={popularHeroes}
sliderWidth={380}
itemWidth={260}
renderItem={_renderItem}
loop={true}
inactiveSlideShift={0}
inactiveSlideOpacity={Platform.OS === "ios" ? 0.5 : 1}
/>
</View>
<View style={styles.heroContainer}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
}}
>
<Text
style={{
...styles.h4,
marginBottom: 10,
paddingLeft: 15,
}}
>
Villians
</Text>
<Icon
name="emoticon-devil"
type="material-community"
color={COLORS.navy}
size={30}
iconStyle={{ bottom: 2, paddingLeft: 5, opacity: 0.9 }}
/>
</View>
<Carousel
data={villains}
sliderWidth={380}
itemWidth={260}
renderItem={_renderItem}
loop={true}
// inactiveSlideShift={-24}
inactiveSlideOpacity={Platform.OS === "ios" ? 0.5 : 1}
/>
</View>
<View style={styles.heroContainer}>
<Text
style={{
...styles.h4,
marginBottom: 10,
paddingHorizontal: 15,
}}
>
X-Men
</Text>
<Carousel
data={XMen}
sliderWidth={380}
itemWidth={260}
renderItem={_renderItem}
loop={true}
// inactiveSlideShift={-24}
inactiveSlideOpacity={Platform.OS === "ios" ? 0.5 : 1}
/>
</View>
</ScrollView>
{/* )} */}
<LinearGradient
colors={[COLORS.beige, "#ffffff00"]}
style={styles.scrollGradient}
locations={[0, 1]}
pointerEvents={"none"}
/>
</SafeAreaView>
</View>
{loading === true ? (
<Modal statusBarTranslucent={true}>
<View
style={{
backgroundColor: COLORS.beige,
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
}}
>
<Progress.CircleSnail
color={[COLORS.navy, COLORS.orange, COLORS.blue]}
size={80}
thickness={10}
style={styles.loading}
strokeCap={"round"}
/>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
marginTop: -15,
left: 3,
}}
>
loading...
</Text>
</View>
</Modal>
) : null}
</>
);
}
Example #5
| Source File: index.js From spree-react-native with MIT License | 4 votes |
|
HomeScreen = ({ navigation }) => {
const [searchQuery, setSearchQuery] = React.useState('')
const newJustInRenderItem = ({ item }) => {
return (
<FlatListImageItem
item={item}
onPress={() => console.log(item.id)}
imageStyle={styles.newJustInImage}
itemContainerStyle={styles.newJustInItemContainer}
/>
)
}
return (
<ScrollView style={globalStyles.containerFluid}>
<View style={globalStyles.container}>
<SearchBar
platform="ios"
value={searchQuery}
placeholder="Search shop catalogue"
onChangeText={text => setSearchQuery(text)}
inputContainerStyle={{ backgroundColor: colors.white }}
containerStyle={{ backgroundColor: colors.background }}
inputStyle={ globalStyles.latoRegular16 }
searchIcon={{ color: colors.black }}
onSubmitEditing={() => {
navigation.navigate('ProductsList', { searchQuery })
}}
/>
</View>
<Image
source={require('../../../../../assets/images/banner-first-order-discount/banner-first-order-discount.png')}
style={styles.bannerFirst}
onPress={() => {
navigation.navigate('ProductsList', { title: 'Womens Dress' })
}}
/>
<Image
source={require('../../../../../assets/images/discount-stripe/DiscountStripe.png')}
style={styles.discountStripe}
/>
<Image
source={require('../../../../../assets/images/banner-EOS-sale/banner-EOS-sale.png')}
style={styles.bannerEndOfSale}
/>
<Text style={styles.hoardingBoard}>
Free Shipping For You Till Midnight !
</Text>
<View style={styles.flatListContainer}>
<View style={globalStyles.container}>
<FlatList
data={DATA}
keyExtractor={item => item.id}
renderItem={({ item }) => <Item item={item} />}
numColumns={3}
ListHeaderComponent={() => <Text style={[styles.flatListHeaderText, { marginLeft: 8 }]}>EXPLORE TOP BRANDS</Text>}
/>
</View>
</View>
<View style={styles.flatListContainer}>
<View
style={globalStyles.container}
>
<FlatList
data={BEST_DEAL_CARD_DATA}
keyExtractor={item => item.id}
renderItem={({ item }) => <Image source={item.source} style={styles.bestDealCards} /> }
ListHeaderComponent={() => <Text style={styles.flatListHeaderText}>BEST DEALS</Text> }
/>
</View>
</View>
<View style={globalStyles.containerFluid}>
<Image source={require('../../../../../assets/images/banner-festive-trend-card/banner-festive-trend-card.png')}
style={styles.bannerFestiveTrend}
/>
</View>
<View style={[styles.flatListContainer, {
marginBottom: 114
}
]}>
<View
style={globalStyles.container}
>
<FlatList
data={NEW_JUST_IN_DATA}
keyExtractor={item => item.id}
renderItem={newJustInRenderItem}
numColumns={3}
ListHeaderComponent={() => <Text style={styles.flatListHeaderText}>NEW JUST IN</Text>}
/>
</View>
</View>
</ScrollView>
)
}
