Related
I have a map() data each of which has touchableopacity that should set the state of modal visible to true, but am unable to do it.
Could anyone let me know a way to set the state according to id?
ParentComponent:
export default function ExpandedVaccineComponent(props) {
const {navigation} = props;
const [note, setNote] = useState({});
const [addNoteText, setAddNoteText] = useState('');
const [modalVisible, setModalVisible] = useState(false);
const [selectedItem,setSelectedItem]=useState(null);
const [demo, setDemo] = useState(false);
let id = props.id;
return (
<View
style={{
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}>
<View style={{marginTop: '2%'}}>
{props.item.vaccine_list.map((i) => {
return (
<View style={{flex: 1}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => setModalVisible(true)}>
<Icon name="calendar" size={15} />
</TouchableOpacity>
<View>
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
}}>
<CalenderModal
item={props.item}
modalVisible={modalVisible}
item={i}
id={id}
/>
<View
style={{
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '72%',
}}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderRightColor: '#C0C0C0',
borderRightWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => setModalVisible(!modalVisible)}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#2D7AFA',
}}>
Cancel
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderLeftColor: '#C0C0C0',
borderLeftWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#2D7AFA',
}}>
Save
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View style={{marginLeft: '10%', width: '30%'}}>
<View>
<View style={{flexDirection: 'row'}}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 14,
color: '#000',
}}>
{i.name}
</Text>
<Text
style={{
fontFamily: 'Roboto',
color: '#000',
opacity: 0.5,
}}>
(Dose{i.dose}/3)
</Text>
</View>
<Text
numberOfLines={2}
ellipsizeMode="tail"
style={{
fontFamily: 'Roboto',
fontSize: 14,
lineHeight: 14,
color: '#000',
opacity: 0.5,
}}>
{i.protects_against}
</Text>
</View>
</View>
<View style={{marginLeft: '30%'}}>
<Text>{i.child_vacc_status.text}</Text>
<Text>16 Aug,2020</Text>
</View>
</View>
</View>
);
})}
</View>
</View>
);
}
CalenderModal component:
import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import DatePicker from 'react-native-datepicker';
import axios from 'axios';
import {ROOT} from '../../../ApiUrl';
export default function CalenderModal(props) {
const [date, setDate] = useState('2016-05-15');
const [vaccinatedOn, setVaccinatedOn] = useState(null);
const [reminder, setReminder] = useState(1);
const [toggle, setToggle] = useState(null);
const [modalVisible, setModalVisible] = useState(null);
const reminderSet = () => {
setReminder(6);
setToggle(6);
};
const vaccinationSet = () => {
setVaccinatedOn(1);
setToggle(1);
};
const data = props.item;
const id = props.id;
const SaveData = () => {
let url = `some url`;
axios({
method: 'POST',
url: url,
data: {
child_id: id,
event_date: date,
status: toggle,
vaccine_id: data.id,
},
headers: {
'content-type': 'application/json',
},
})
.then(function (res) {
console.log('RES', res);
if (res.data.code == 200) {
navigation.navigate('consultationHome', {res: res});
}
})
.catch(function (err) {
console.log('ERR', err);
});
};
return (
<View>
<View style={styles.modalView}>
<Text>{props.item.name}</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '5%',
}}>
{reminder == 6 && toggle == 6 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Icon
name="circle"
size={17}
color="pink"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Set reminder
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => reminderSet()}>
<Icon
name="circle-o"
size={17}
color="#000"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Set reminder
</Text>
</TouchableOpacity>
)}
{vaccinatedOn == 1 && toggle == 1 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Icon
name="circle"
size={17}
color="pink"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => vaccinationSet()}>
<Icon
name="circle-o"
size={17}
color="#000"
style={{marginTop: '2%', paddingRight: '1%'}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
)}
</View>
<DatePicker
style={{width: 200, marginTop: '5%'}}
date={date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0,
},
dateInput: {
marginLeft: 36,
},
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {
setDate(date);
}}
/>
{console.log('DATE', date)}
</View>
</View>
);
}
const styles = StyleSheet.create({
modalView: {
backgroundColor: 'white',
padding: 20,
},
});
Any suggestion would be great, please let me know if anything else is required for better understanding.
you might want to try setting up your onPress similar to the RN documentation for TouchableOpacity (https://reactnative.dev/docs/touchableopacity.html you also may want to consider switching to Pressable for future proofing purposes). You can do
const onPress = () => setModalVisible(true);
<TouchableOpacity onPress={onPress}>
Hi, I am using react-native-image-crop-picker to overcome the above-shown module to select images from the gallery and display it in react native app, but I also want to click on add photo and again select images from the gallery and append them to the previous array of photos, am unable to figure that out.
This is the exact code that I have written to achieve the above-shown behavior, what should I change or add to perform the append feature?
import React, {useEffect, useState} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Image,
TouchableOpacity,
Dimensions,
FlatList,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-crop-picker';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const App = () => {
const [photos, setAddPhotos] = useState(null);
const [photo, setAddphoto] = useState(null);
const handleChoosePhoto = () => {
ImagePicker.openPicker({
multiple: true,
waitAnimationEnd: false,
includeExif: true,
forceJpg: true,
})
.then((images) => {
setAddphoto(null);
setAddPhotos(
images.map((i) => {
console.log('recieved image', i);
return {
uri: i.path,
// width: i.width,
// height: i.height,
width: 185,
height: 128,
mime: i.mime,
};
}),
);
})
.catch((e) => alert(e));
};
const renderImage = (image) => {
return (
<Image
style={{
width: 185,
height: 128,
resizeMode: 'contain',
marginTop: 1,
}}
source={image}
/>
);
};
const renderAsset = (image) => {
return renderImage(image);
};
return (
<View style={{flex: 1}}>
{console.log('PHOTOS', photos)}
{photos === null ? (
<View style={{flex: 1}}>
<View style={Styles.headerWrapper}>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Icon name="angle-left" size={30} />
<TouchableOpacity style={{right: '10%', top: '2%'}}>
<Text style={{fontSize: 15, fontWeight: 'bold'}}>
SAVE AND EXIT
</Text>
</TouchableOpacity>
</View>
</View>
<ScrollView>
<Text style={Styles.headerText}>Add photos to your listing</Text>
<Text style={Styles.subHeader}>
Photos help guests imagine staying in your place. You can start
with one and add more after you publish.
</Text>
<View style={Styles.container}>
<TouchableOpacity onPress={() => handleChoosePhoto()}>
<View
style={{
backgroundColor: '#20B2AA',
width: 150,
height: 40,
borderRadius: 5,
justifyContent: 'center',
}}>
<Text
style={{
color: '#fff',
textAlign: 'center',
fontSize: 15,
fontWeight: 'bold',
}}>
Add photos
</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
<TouchableOpacity
style={{
alignSelf: 'flex-end',
right: '5%',
position: 'absolute',
bottom: 10,
}}>
<View
style={{
borderColor: '#20B2AA',
borderWidth: 1,
alignSelf: 'flex-end',
padding: 10,
}}>
<Text
style={{fontSize: 15, fontWeight: 'bold', color: '#20B2AA'}}>
Skip For Now
</Text>
</View>
</TouchableOpacity>
</View>
) : (
<>
<View style={{flex: 1}}>
<View style={Styles.headerWrapper}>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Icon name="angle-left" size={30} />
<TouchableOpacity style={{right: '10%', top: '2%'}}>
<Text style={{fontSize: 15, fontWeight: 'bold'}}>
SAVE AND EXIT
</Text>
</TouchableOpacity>
</View>
</View>
<ScrollView>
<View style={{flex: 1, flexWrap: 'wrap', flexDirection: 'row'}}>
{photos
? photos.map((i) => (
<View
style={{
// width: 185, height: 128,
// width:'50%',
flexBasis: '33.33%',
}}
key={i.uri}>
{renderAsset(i)}
</View>
))
: null}
</View>
</ScrollView>
<TouchableOpacity
style={{
alignSelf: 'flex-end',
right: '5%',
position: 'absolute',
bottom: 10,
}}>
<View
style={{
backgroundColor: '#20B2AA',
alignSelf: 'flex-end',
padding: 10,
}}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#FFF'}}>
NEXT
</Text>
</View>
</TouchableOpacity>
</View>
</>
)}
</View>
);
};
export default App;
const Styles = StyleSheet.create({
headerWrapper: {
width: deviceWidth,
paddingLeft: 24,
paddingTop: 10,
paddingBottom: 10,
},
headerText: {
fontWeight: 'bold',
fontSize: 28,
paddingLeft: 24,
},
container: {
padding: 24,
},
subHeader: {
paddingLeft: 24,
fontSize: 17,
paddingTop: 24,
paddingRight: 24,
},
});
Please let me know if anything else is required for better understanding, thank you.
You only need to take the prevState in setAddPhotos
setAddPhotos((lastPhotos) => {
const imagesMap = images.map((i) => {
return {
uri: i.path,
width: i.width,
height: i.height,
mime: i.mime,
};
});
return [...lastPhotos, ...imagesMap];
});
I'm building an app which uses the Map method to build several different components. I have a scrollview which contains the whole page. Currently, the scrollView won't expand to contain everything despite trying what is seemingly every bit of advice online.
I have tried having the scrollview be inside another view but that still doesn't work as well as a combination of different flex configurations. Does anyone know why this page in particular isn't working. I have compared it to other pages and there is seemingly no reason as to why the flex does not extend.
Thanks
render(){
return (
<ScrollView contentContainerStyle={{flexGrow: 1}} >
<View style={styles.pageContainer}>
<View style={styles.photoShowcase }>
{
this.state.images.map((item, key) => (
<Image key = {key} source={{uri: item}} style = {{width: 200, height: 200}} />
))
}
</View>
<View style = {styles.cameraContainer}>
<TouchableHighlight onPress={this.handleChoosePhoto}>
<Icon type='font-awesome' name='photo' size={60} />
</TouchableHighlight>
<Icon type='font-awesome' name='camera' size={120} />
<Icon type='font-awesome' name='map-o' size={60} />
</View>
<View style= {styles.detailsContainer}>
<View >
<TextInput onChangeText={(text) => {this.setState({title: text})}} style = {styles.title} >New Day Title </TextInput>
</View>
<View style = {styles.description}>
<TextInput onChangeText={(text) => {this.setState({description: text})}} multiline={true}>Description for the text goes here</TextInput>
</View>
</View>
<View style = {styles.friendsContainer}>
<View>
<Text style = {styles.friendsSectionTitle}>I spent today with: </Text>
</View>
<ScrollView horizontal= {true}>
<View style={styles.peopleContainer}>
{
this.state.friends.map((item, key) => (
<View key={key} >
<TouchableHighlight >
<PersonEntryBox name={item.name} backgroundImageToUse={item.image} style = {styles.smallBox} functionToRun = {() => {this.state.selectedFriends.push(item)}} />
</TouchableHighlight>
</View>
))
}
</View>
</ScrollView>
</View>
<View style={{height: '40%', width: '100%'}}>
<MapView
style={{...StyleSheet.absoluteFillObject}}
initialRegion={{
latitude: 45.5209087,
longitude: -122.6705107,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={this.handlePress}
>
{this.state.markers.map((marker) => {
return (
<Marker {...marker} >
<View style={styles.marker}>
<Text style = {styles.markerText}>{marker.cost}</Text>
</View>
</Marker>
)
})}
</MapView>
</View>
<View style = {styles.ratingsButtonContainer}>
<RateTheDayBox style={styles.badDay} dayRating="Bad" onClick={() => {this.state.rating ="red"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.okayDay} dayRating="Okay" onClick={() => {this.state.rating = "yellow"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.greatDay} dayRating="Great" onClick={() => {this.state.rating = "green"; this.storeDay()}}></RateTheDayBox>
</View>
</View>
</ScrollView>
);
}}
const styles = StyleSheet.create({
pageContainer: {
paddingTop: 50,
alignItems: 'center',
flex: 1,
},
mapContainer:{
flex: 1,
},
marker: {
backgroundColor: "#550bbc",
padding: 5,
borderRadius: 5,
},
text: {
color: '#FFF',
fontWeight: "bold",
},
photoShowcase: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-end',
zIndex: 0,
height: 200
},
cameraContainer: {
flexDirection: 'row',
paddingTop:20,
paddingLeft: '5%',
paddingRight: '5%',
width: '100%',
height: '25%',
alignItems: 'center',
justifyContent: 'space-around',
},
iconStyles: {
marginLeft: 10,
color: 'red',
},
detailsContainer: {
width: '100%',
height: '35%',
},
title: {
paddingLeft: 10,
fontSize: 40,
textDecorationLine: 'underline',
},
description: {
paddingLeft: 11,
paddingTop: 10,
},
friendsContainer: {
width: '100%',
height: '20%',
},
boxContainers: {
flexDirection: 'row',
},
friendsSectionTitle: {
paddingLeft: 10,
fontSize: 30,
},
ratingsButtonContainer: {
width: '100%',
height: '20%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
badDay: {
backgroundColor: 'red',
},
okayDay: {
backgroundColor: 'yellow',
},
greatDay: {
backgroundColor: 'green',
},
peopleContainer: {
paddingTop: 10,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center' ,
width: '100%',
height: '100%',
},
});
EDIT: For anyone suffering from the same issue, REMOVE PERCENTAGES FROM HEIGHTS. This fixed this issue for me.
Maybe just use style instead of contentContainerStyle ? the doc says :
These styles will be applied to the scroll view content container which wraps all of the child views
So maybe here is your problem, you're not applying the flexGrow to the scrollView but to its wrapper
I can't get my app to fill the whole screen. Whatever i do, there is always a white bar on the bottom of the page. It's so strange because it works on some devices but not others. i'm going crazy over this!
Ive tried const { height, width } = Dimensions.get('window'); and setting the app height with that, and it actually worked once, but now i can't get it to work again. ive tried rewrapping everything in different ways, with different views and scrollviews.
ps.: i removed all functions and useless code so it's not too much code, but
here is my code
import React, { Component } from 'react';
import {
View,
Switch,
Text,
TextInput,
TouchableOpacity,
ImageBackground,
Image,
Linking,
StatusBar,
Dimensions,
} from 'react-native';
import { ScaledSheet } from 'react-native-size-matters';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
export default class App extends Component {
constructor() {
super();
};
}
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
keyboardShouldPersistTaps={'always'}
style={styles.teste}
showsVerticalScrollIndicator={false}>
<StatusBar backgroundColor="#50a9f3" />
<ImageBackground source={require('./background.png')} style={styles.imagemBackground}>
<View style={styles.campos}>
<Image
style={{ width: 110, height: 110, alignSelf: 'center' }}
source={require('./logo.png')}
/>
<View style={styles.item}>
<Text style={styles.texto}>M²s do ambiente</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={mQuadrado => this.setState({ mQuadrado })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de pessoas</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={pessoas => this.setState({ pessoas })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de eletrodomésticos</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={eqps => this.setState({ eqps })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de janelas </Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={jnls => this.setState({ jnls })}
/>
</View>
<View style={styles.switch}>
<Text style={styles.texto}>Recebe luz solar </Text>
<Switch
style={{ transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }] }}
thumbColor="#ffffff"
trackColor={{ true: '#c0c0c0' }}
value={this.state.switch}
onValueChange={value => this.setState({ switch: value })}
/>
</View>
<View style={styles.input}>
<TouchableOpacity style={styles.opacity} onPress={this.calcular}>
<Text style={styles.textoCalcular}>CALCULAR</Text>
</TouchableOpacity>
</View>
<View style={styles.resultadoBox}>
<Text style={styles.textoResultado}>Você precisará de</Text>
<Text style={styles.resultado}>{btu == '0' ? null : btu + '.000 BTUS'}</Text>
</View>
</View>
<View style={styles.banner}>
<TouchableOpacity
style={styles.bannerContainer}
onPress={() => Linking.openURL('https://matum.com.br/produtos-sisum/')}>
<Text style={styles.bannerTexto}>Gerencie suas manutenções preventivas e corretivas</Text>
<Text style={styles.bannerTexto}>Relatório PMOC simples</Text>
<Text style={styles.bannerTextoX}>Saiba mais</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</KeyboardAwareScrollView>
</View>
);
}
}
const { height, width } = Dimensions.get('window');
const heightCerto = height - StatusBar.currentHeight;
const styles = ScaledSheet.create({
container: {
flex: 1,
},
teste: {
flex: 1,
},
imagemBackground: {
flex: 1,
},
campos: {
flex: 95,
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: '20#s',
paddingTop: '12#s',
},
item: {
flex: 1,
},
switch: {
paddingTop: '15#s',
flexDirection: 'row',
justifyContent: 'flex-start',
flex: 1,
},
textoCalcular: {
fontSize: '15#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 2,
},
input: {
padding: '20#s',
alignItems: 'center',
flex: 1,
},
opacity: {
backgroundColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
borderColor: '#000000',
width: '190#s',
height: '39#s',
justifyContent: 'center',
alignItems: 'center',
},
resultadoBox: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(100,100,100,0.5)',
margin: 0,
borderColor: 'rgba(100,100,100,0.5)',
borderRadius: '10#s',
},
resultado: {
fontSize: '28#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
banner: {
flex: 10,
backgroundColor: 'rgba(140,140,140,0.5)',
margin: 0,
borderColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
alignSelf: 'stretch',
},
bannerContainer: {
alignItems: 'center',
},
bannerTexto: {
color: '#ffffff',
fontSize: '12#s',
},
bannerTextoX: {
color: '#50a9f3',
fontSize: '10#s',
textShadowColor: 'black',
textShadowRadius: 4,
},
inputText: {
fontSize: '12#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
height: '38#s',
},
texto: {
fontSize: '13#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 5,
},
textoResultado: {
fontSize: '16#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
});
I think you're talking about the image background but not totally sure. I was able to get it to stretch to the full height by adding the following height declaration:
imagemBackground: {
flex: 1,
height: height,
},
link to example: https://snack.expo.io/r1Y-zpwMH
You are using flex:1 many times in style that is the problem.
please give flex:1 in container style and remove all flex:1 in other styles instead of flex:1 you can use width and height in percentage.
like style={{width:'100%',height:'40%'}}.
Thank you!
I am importing a custom component (RecipeCard) and it isn't appearing on the screen.
I'm fairly certain it is to do with the styling that I am currently using.
The fastimage component works exactly as the RN component does and can be seen here.
Any help is appreciated!
File1
<View style={styles.container}>
<Head
headerText={this.props.type}
navigation={this.props.navigation}
backButton
/>
<FlatList
data={this.state.data}
renderItem={({ item }) => <RecipeCard {...item} />}
/>
</View>
const styles = {
container: {
flex: 1
}};
RecipeCard
<FastImage
style={styles.imageStyle}
source={{ uri: this.props.image }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.title}
</Text>
<Text style={styles.subtitleText}>
{this.props.subtitle}
</Text>
</View>
</FastImage>
const styles = StyleSheet.create({
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
},
titleContainer: {
position: 'absolute',
marginTop: 15,
zIndex: 2,
bottom: 13,
flex: 1,
width: '100%',
height: 70,
flexDirection: 'column',
alignItems: 'flex-start',
},
titleText: {
color: 'white',
fontWeight: '800',
paddingLeft: 5,
paddingTop: 10
},
subtitleText: {
color: '#adadad',
fontWeight: '500',
paddingLeft: 5,
paddingTop: 5,
}
});
Try to add the resizeMode to the FastImage:
resizeMode={FastImage.resizeMode.contain}
It's also described in the docs of FastImage:
import FastImage from 'react-native-fast-image'
const YourImage = () =>
<FastImage
style={styles.image}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers:{ Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
I tried the example you have given above, I was able to see the image with a little change in imageStyle, just added height and it was showing the images.
RecipeCard component
const RecipeCard = (props) => {
return (
<FastImage
style={styles.imageStyle}
source={{ uri: 'https://unsplash.it/400/400?image=1' }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{props.title}
</Text>
<Text style={styles.subtitleText}>
{props.subtitle}
</Text>
</View>
</FastImage>
);
}
In imageStyle I have added height
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
height: 200
},
Hope this helps!