I am new to react native .what I want is that in my app there is many images in each menu .when I click on the image I want to view the image in the screen size .the thing is when I click on every image I want it to Direct to a single page and call the image from there ..how is it possible to pass image variable from different pages to a single page..the so far did image view single page render is like below:,when the image component is did so it only views the first image not the other .what is the solution?
render() {
this.state.incident = this.props.navigation.getParam('incidents','hi!!');
this.state.tenantattachedagreement = this.props.navigation.getParam('tenantattach','hi!!!')
// this.state.residents = this.props.navigation.getParam('residents','');
// this.state.tenantattachedagreement = this.props.navigation.getParam('attachedagreement','');
// console.log("attached agreement",this.state.tenantattachedagreement);
// incidents = this.props.navigation.getParam('incidents,'');
// console.log("hello",attached);
// console.log("l&f pic",this.state.lostfound);
console.log("incidentpic",this.state.incident);
console.log("tenantattach",this.state.tenantattachedagreement);
// console.log("residents",this.state.residents);
return (
<View style={{flex:1}}>
<StatusBar
barStyle = "light-content"
hidden = {false}
backgroundColor = "#32ACFD"
translucent = {false}
networkActivityIndicatorVisible = {true}
/>
<View style={{flexDirection:'row',height:50,width:'100%',justifyContent:'center',alignItems:'center',backgroundColor:'#32ACFD',elevation:5,borderBottomWidth:1,borderColor:'#5b9bd5'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.goBack()}} style={{height:'100%',width:'12%',justifyContent:'center',alignItems:'center'}}>
<Icon name="angle-left" style={{fontSize:25,color:'white'}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('DashBoard')}} style={{width:'33%',height:'100%',justifyContent:'center'}}>
<Text style={{color:'white',fontSize:18,textShadowColor: 'grey',paddingLeft:'5%',fontWeight:'500',fontStyle:'normal',textShadowRadius:5,textShadowOffset: {width: -1, height: 1}}}>Smart Vitae</Text>
</TouchableOpacity>
<View style={{width:'35%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white'}}>Unit: {this.state.unitname}</Text>
</View>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Notification')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="bell-o" style={{color:'white',fontSize:22}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Settings')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="cog" style={{color:'white',fontSize:24}}/>
</TouchableOpacity>
</View>
<View>
<View style={{height:'100%',width:'100%',justifyContent:'center',alignItems:'center',borderColor:'#2E4053'}}>
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.lostfound}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.tenantattachedagreement}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.incident}} style={{height:'100%',width:'100%'}}></Image>
</View>
</View>
</View>
);
}
}
I believe this is a styling issue, you have multiple images all trying to fill 100%
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
Try using flex or updating your height, like this:
<Image source={{uri:this.state.residents}} style={{height:'25%',width:'100%'}}></Image>
i get image url correct and passed as props but image not showing in my app
main screen
here main screen that render FlatList data = products that include image url and i log that and getting correct but image not showing
const products = useSelector(state => state.products.availableProducts);
return(
<FlatList numColumns ={2}
data={products}
keyExtractor={item => item.id}
renderItem={itemData => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onSelect={()=>{
props.navigation.navigate('detail', {
productId: itemData.item.id,
})
}}
>
</ProductItem>
)}
/>
ProductItem component
<View style={style.product}>
<View style={style.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View>
<View style={style.imageContainer}>
<Image style={style.image} source={{uri: props.image}} />
</View>
<View style={style.detail}>
<Text style={style.title}>{props.title}</Text>
<Text style={style.price}>{props.price}SDG</Text>
</View>
</View>
</TouchableCmp>
<View style={{marginTop:1}}>{props.delete}</View>
</View>
</View>
¿What properties does the style tag "style.image" have?
There may be a problem with the height or width of the image.
i find the should add http:// to image url because i am not adding when saving data
code will be like
<Image style={styles.image} source=
{{uri:`http://${singleproduct.imageUrl}`}} />
I'm trying to display images with round borders in a FlatList. However, I'm using flex, so I don't know the absolute value to put in borderRadius. This is what I tried:
function Row(obj) {
const [width, setWidth] = useState(0);
return (
<View style={styles.contact}>
<Image
style={[styles.thumbnail, {borderRadius: width / 2}]}
onLayout={({nativeEvent}) => {setWidth(nativeEvent.layout.width);}}
source={{uri: obj.picture.thumbnail}}
/>
<View style={styles.contactInfo}>
<Text>{obj.name}</Text>
<Text>{obj.phone}</Text>
</View>
</View>
);
}
export default function Contacts() {
<View style={styles.contactsContainer}>
<FlatList
data={contacts}
renderItem={({ item }) => Row(item)}
keyExtractor={item => item.id.toString()}
/>
</View>
}
It doesn't work because Hooks can only be called inside the body of a functional component.
Any idea?
I would try wrapping this Image component into a View and add the borderRadius attribute on the View's style, together with a overflow: 'hidden'. This way you're making sure that the image is in fact inside of a component with the border radius you want.
Something similar to this:
return (
<View style={styles.contact}>
<View style={[styles.thumbnail, {borderRadius: width / 2, overflow: 'hidden'}]}>
<Image
style={{flex: 1}}
onLayout={({nativeEvent}) => {setWidth(nativeEvent.layout.width);}}
source={{uri: obj.picture.thumbnail}}
/>
<View style={styles.contactInfo}>
<Text>{obj.name}</Text>
<Text>{obj.phone}</Text>
</View>
</View>
);
Then in order to determine how big your borderRadius should be, you can extract the device's width or height by using Dimensions from react-native (and the apply the transformation you find useful for it)
an example:
import {Dimensions} from 'react-native'
let width = Dimensions.get('window').width
I've tried several times with , but didn't work. Maybe I don't know where to put it in code. I'm a beginner in react-native, but I need your help. Please share your answers!
render() {
console.log('render register -> renderComponent');
return (
<View style={styles.container}>
<Image source={require('../components/logo.png')} />
<KeyboardAvoidingView style={styles_register.containerView} behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles_register.registerScreenContainer}>
<View style={styles_register.registerFormView}>
<ThemeProvider theme={theme}>
<Button
buttonStyle={styles.loginButtonn}
onPress={() => {
this.registerWithFacebook();
}}
title = "Login with Facebook"
/>
</ThemeProvider>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</View>
);
}
}
First of all, make sure that your image is in that path ../components/logo.png, also set the size to your image component. Since you are beginner always start with the documentation
<Image
style={{width: 50, height: 50}}
source={require('../components/logo.png')}
/>
render() {
console.log('render register -> renderComponent');
return (
I've been testing out the WebView component, but I can't seem to get it to render things.
Sample here: https://snack.expo.io/r1oje4C3-
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView source={{html: '<p>Here I am</p>'}} />
<WebView source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}
When running the above example in Expo, neither of the two WebView components seem to render. What am I doing wrong?
It seems that you need to provide a width style parameter, like so :
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{width: 300}}
/>
Note that you might have to provide a height style parameter as well. You can also add flex: 1 to the style.
add style prop with flex: 1 on WebView
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />
<WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}