I want to divide the whole screen into 4 equal parts each having a clickable action and onclick a prompt should appear with a textbox and an okay button on pressing it I need to render a webview
If you are doing this in react-native then use below code. This will divide screens in four parts and with TouchableOpacity you can use click events reflection otherwise you can use simple View.
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'red' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'green' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'blue' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'yellow' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
</View>
</View>
Yes, you can use common styling and components but for now I use separate So, you can easily edit and test.
You can use the vw(viewport width) and vh (viewport height), and assign to all of your items
width: "50vw",
height: "50vh"
<View style={{flex: 1}}>
<View style={{flex: 1}}> </View>
<View style={{flex: 1}}> </View>
</View>
Related
I want to fix an icon inside <ScrollView at right bottom as shown below
But currently , the + icon is moving along with other contents. I want it to be fixed at that position even when other contents go down in the background. Current behaviour
Tried solution :
I used contentContainerStyle={{flexGrow :1}} in the ScrollView , still it doesnt work .
It works when I add the icon outside ScrollView. But it doesn't give expected results which is shown below it cuts the scrolliew content right above the icon:
Can anyone suggest with good solution for this scenario?
Code :
<ScrollView>
{this.state.alertData &&
this.state.alertData.map((item, index) => {
return (
<View>
<TouchableOpacity
style={styles.alertContainer}
onPress={() => this.onCardClick(index, true)}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.title}>{item.title}</Text>
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.sideText}>Il y a 2h</Text>
{item.status && (
<Away style={{ marginLeft: 5, marginTop: 6 }} />
)}
</View>
</View>
<View style={{ marginBottom: 10 }}>
<Text style={styles.primaryText}>{item.primaryText}</Text>
<Text style={styles.secondaryText}>
{item.secondaryText}
</Text>
</View>
<View>
<Text style={styles.primaryText}>Message</Text>
<Text style={styles.secondaryText}>{item.message}</Text>
</View>
{this.state.selectedCard[index] && (
<Image
style={{ height: 250, width: 300 }}
// source={require("../../../assets/images/image6.jpeg")}
source={item.image}
/>
)}
</TouchableOpacity>
<Close
style={{ top: 10, right: -5, position: "absolute" }}
onPress={() => this.toggleModal(index)}
/>
</View>
);
})}
<View
style={{ alignItems: "flex-end", marginTop: 20, marginBottom: 20 }}
>
<AddnewAlerts />
</View>
</ScrollView>
This is the code I have for the ScrollView
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
<View style={{ maxHeight: 280 }}>
<FlatList
style={{ backgroundColor: '#eee' }}
data={suppliers}
keyExtractor={supplier => supplier}
renderItem={({ item, index }) => {
const style = index % 2 === 0 ? { backgroundColor: '#fff' } : null;
return (
<TouchableOpacity
style={{
...style,
height: height / 14,
borderColor: '#333',
borderWidth: 0.5,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text style={{ fontSize: 14 }}>{item}</Text>
<Feather name="chevron-right" size={21} />
</TouchableOpacity>
);
}}
/>
</View>
</ScrollView>
The content of the FlatList is dynamic meaning that the length of the supplier array can change at anytime so I have a maxHeight and want it to simply be a list you can scroll through if the content extends the maxHeight. I have tried messing around with a lot of different things but nothing seems to work. You can see the outcome here
I get a list that is not scrollable.
In your first line remove the contentContainerStyle with flex-grow
your code
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
change to
<ScrollView contentContainerStyle={{ }} scrollEnabled>
if you need flex then wrap the components with another view tag
For example
<ScrollView scrollEnabled>
<View style={{flexGrow: 1}}>
<FlatList/>
</View>
</ScrollView>
It worked for me.
I would like my button (the blue block across the screen) to be much smaller and in the bottom right corner of the screen. How do I do this with styling in react-native?
Here is my button at the moment:
App.js
render() {
return (
<View>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<Button style={{ width: 50, alignSelf: "flex-end" }}
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
)
}
}
Do you want it to be right of the button that is hidden if so you can give it a flexDirection of row and give flex to each wrapper so that it adjust itself
something like this.
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 0.8}}><Button></Button></View>
<View style={{ flex: 0.2}}><Button></Button></View>
</View>
If you want it to be on separate line below the button that is hidden you can do
<View>
<Button style={{ width: 50, alignSelf: "flex-end" }}></Button>
</View>
and you can adjust the width accordingly.
You can update your render function as
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<View style={{ width: 50, alignSelf: "flex-end">
<Button
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
</View>
)
}
}
hi there i have a small problem i dont know why my text dont want to be wrapped but the problem the same code work for me in other screen but in the screen below dont want to work ?
here is some screenshot from my phone
image 1
image 2
and this is my code
import React from 'react';
import { View, Text } from 'react-native';
const Part = (props) => (
<View style={{ flexDirection: 'row', marginHorizontal: 20, marginVertical: 10 }}>
<Text style={{ marginHorizontal: 10 }}>-</Text>
<View>
<Text style={{ flexWrap: 'wrap' }}>{props.name}</Text>
{props.adress !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Adresse : </Text>
<View style={{ flexDirection: 'row' }} >
<Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
</View>
</View> : null }
{props.tel !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Tél : </Text>
<View>
{props.tel.map((tel) => (
<Text>{tel}</Text>
)
) }
</View>
</View> : null }
{props.fax !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Fax : </Text>
<View>
{props.fax.map((fax) => (<Text>{fax}</Text>))}
</View>
</View> : null}
</View>
</View>
);
export default Part;
give width in percentage Like
<View style={{ flexDirection: 'row'' }}>
<Text>Adresse : </Text>
<View style={{ flexDirection: 'row',width:'50% }} >
<Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
</View>
I have build React Native App and I face Problem for "Api" t did not give
me an error but i gives me a warring or Each items should have unique key I
didn't find any solution for how i solve this.
how to I use unique key in function
**
How to fix reactjs warning: each child in an array should have a unique prop…? 2**
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View style={styles.card_contanier}>
<TouchableOpacity
style={{ flex: 1 }}
// onPress={() => this.onforward()}
>
<View style={{ height: "45%" }}>
<Image
source={require("../img/special-page-banner.jpg")}
style={{
flex: 1,
width: imageWidth,
resizeMode: "stretch"
}}
/>
</View>
<View style={styles.title}>
<Text
style={{ color: "black" }}
numberOfLines={2}
ellipsizeMode={"tail"}
>
{videoData.name}
</Text>
</View>
<View style={{ height: "20%" }}>
<View style={styles.buttom_contanier}>
<View style={styles.logo}>
<Thumbnail
source={require("../img/andy-sm.png")}
style={{ height: 32, width: 32 }}
/>
</View>
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row", left: 5 }}>
<Text
style={{ color: "black" }}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{videoData.created_by_user.name}
</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="calendar" size={10} style={{ top: 2 }} />
<Text style={styles.text}>10 Oct 2018</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="eye" size={10} style={{ top: 2 }} />
<Text style={styles.text}>11 views</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
First and not the recommended approach will be tu use your index you get as second argument in your .map callback
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={index} style={styles.card_contanier}>
But using index is not recommended. If you have an id coming from your backend I will use it. This can cause problem with animation and thing like that if you use index.
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={videodata.id} style={styles.card_contanier}>
You can read about all this here https://reactjs.org/docs/lists-and-keys.html#keys
And article here about why not use index https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318