can you some one help me to achieve below design i'm not be able to achieve the same design
bellow is my code
<View style={{ position: 'absolute', padding:8, borderColor: 'gray', borderWidth: 1, marginLeft: 30, width: '25%', top: 120, backgroundColor: 'transparent' }}>
<Text>From</Text>
</View>
<View style={{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
<Text>MAPLIN STORE</Text>
<Text>12 Kwame Nkrumah Bvd</Text>
<Text>Pune, INDIA</Text>
</View>
Thanks
Something like this works for you?
<View>
<View style={{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
<View style={{ position: 'relative', padding:8, borderColor: 'gray', borderWidth: 1, marginLeft: 20, width: '25%', backgroundColor: 'white',bottom: 33}}>
<Text>From</Text>
</View>
<Text>MAPLIN STORE</Text>
<Text>12 Kwame Nkrumah Bvd</Text>
<Text>Pune, INDIA</Text>
</View>
</View>
<View style={{padding:10, borderColor: 'gray', borderWidth: 1, width: '95%', alignSelf: 'center', borderRadius: 7, marginTop: 25 }}>
<View style={{ padding: 8, borderColor: 'gray', borderWidth: 1, marginLeft: 20, width: '25%', backgroundColor: 'white',bottom: 33}}>
<Text>From</Text>
</View>
<Text>MAPLIN STORE</Text>
<Text>12 Kwame Nkrumah Bvd</Text>
<Text>Pune, INDIA</Text>
</View>
try this code it's simple and nit code no need to extra main view and position
hope it would be help
Please check the link https://snack.expo.io/B1inoHHVV you already got your answer may hope it will also help you
<View style={{flex:1,justifyContent:'center'}}>
<View style={{padding:10,margin:5,borderColor:'black',borderWidth:2}}>
<View style=
{{borderColor:'black',
borderWidth:1,width:120,
bottom:30,
backgroundColor:'white'}}>
<Button title="From"/>
</View>
<View style={{margin:10}}>
<Text style={{fontWeight: 'bold'}}>MAPLIN STORE</Text>
<Text style={{fontWeight: 'bold'}}>12 Kwame Nkrumah Bvd</Text>
<Text style={{fontWeight: 'bold'}}>PUNE INDIA</Text>
</View>
</View>
</View>
Related
am using React native web and I have a Modal view as follows:
(am quoting only the return part as mostly it is a design related issue)
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
backgroundColor: 'white',
height: '400px',
width: '450px',
}}>
<Text
style={{
fontFamily: 'Roboto',
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 20,
}}>
{name}
</Text>
<View
style={{
borderBottomColor: '#18D0E4',
borderBottomWidth: 1,
}}
/>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '5%',
padding: 20,
margin: '5%',
}}>
{reminder == 6 && toggle == 6 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
marginLeft: 5,
}}>
Set Different reminder
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => reminderSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Set Different reminder
</Text>
</TouchableOpacity>
)}
{vaccinatedOn == 1 && toggle == 1 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => vaccinationSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
)}
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<DatePicker selected={date} onChange={(date) => setDate(date)} />
</View>
</View>
</View>
<View
style={{
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '82%',
paddingTop: 20,
}}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderRightColor: '#C0C0C0',
borderRightWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => navigation.goBack()}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
Cancel
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderLeftColor: '#C0C0C0',
borderLeftWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => SaveData(id)}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
OK
</Text>
</TouchableOpacity>
</View>
</View>
</View>
the web view is appearing as follows:
However, as soon as I switch to mobile view, the modal disappears like follows:
Kindly let me know, where I have gone wrong, any lead would be appreciated, thank you in advance.
Let me know if anything else is required.
<View style={{ height: "100vh", width: "100vw" }}> should be added at Root to make it responsive over all platforms
I was wondering how to wrap the title on to another line or possibly 2 lines before cutting off...
I tried flex wrap but im possibly not applying it correctly. Or if theres some javascript I could add to the ternary. Apologies if this has already been answered I couldnt find it.
enter image description here
<View style={styles.titleWrapper}>
<Text style={styles.title}>
{title.length > 20 ? title.slice(0, 22) + "..." : title}
</Text>
<MaterialIcons name="favorite-border" color="#72bcd4" size={24} />
</View>
<View style={styles.descriptionWrapper}>
<Text style={styles.description}>
{description.length > 100 ? description.slice(0, 100) + "..." : description }
</Text>
</View>
</View>
</TouchableOpacity>
)
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
height: 300,
margin: 20,
borderRadius: 10,
shadowColor: "black",
shadowOpacity: 0.25,
shadowOffset: {width: 0, height: 2},
shadowRadius: 8,
elevation: 5
},
imageWrapper: {
width: "100%",
height: "60%",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: "hidden"
},
titleWrapper: {
height: "10%",
paddingHorizontal: 15,
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
marginTop: 10
},
You have specify the line count like
<Text style={styles.title} numberOfLines={2}>
{titile}
</Text>
React native will handle the ellipsis for you based on the lines
I have two rows, 1st one contains image and second one text. So when I use flexDirection: 'row' the text overflow the width and ellipsis not showing. Please have a look into my code.
<View style={styles.boxContainer}>
<View style={{marginRight: 10}}>
<Text style={{textAlign: 'left'}}>
<Image
style={styles.eventImg}
source={{uri: item.image}}
/>
</Text>
</View>
<View>
<Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
<Text style={{fontSize: 12, color: '#878787'}}>{item.formatted_date}</Text>
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}</Text>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={() =>
this.onPressReadMore(item.id)
}
>
<Text style={{fontSize: 12, padding: 5, backgroundColor: '#76ac42', color: '#ffffff', borderRadius: 3, textAlign: 'center', marginTop: 10, width: 80}}>Read More</Text>
</TouchableOpacity>
<Text style={{alignSelf: 'center', textAlign: 'right'}}>Registered</Text>
</View>
</View>
</View>
styles
const styles = StyleSheet.create({
container: {
backgroundColor: '#ffffff'
},
tabContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
tabSingle: {
flex: 1,
marginBottom: 5
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'left',
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20
},
boxContainer: {
backgroundColor: '#f6f6f6',
padding: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
flexDirection: 'row',
borderRadius: 5
},
eventImg: {
width: 80,
height: 80,
resizeMode: 'cover',
borderRadius: 5
}
});
Where am going wrong. I have tried many article and none of them seems working. Is there any way to fix this. Please have a look into the design,
Try this code:
<View style={{flexDirection:'row'}}>
<Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
{item.descr}
</Text>
</View>
Set the horizontal value in View, which contains the ellipsis.
<View style={{width: 200}} >
....
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}
</Text>
Here's an example of a word-for-word abbreviation I've simplified.
i'm using react native swipeout within a flat list. I'm pulling my data from a collection in firestore. I want to pull the items in the collection and apply a color to the item based on the item type. For instance, if someone has a car then it would be purple view and the bike would be green. I applied an if statement and then render method based on the if statement. Can someone help me on what i'm doing wrong?
if (collection.item.type == 'car') {
let that = this;
return (
<View style={{marginTop: 20}}>
{/* this is an empty view to space out the array items. was unable to figure out a more clever way to separate the views and keep the side buttons in line with the component.*/}
<Swipeout
key={collection.key}
onOpen={(itemID, ) => {
that.setState({
itemID,
});
}}
style={{backgroundColor: 'rgba(0,0,0,0)',}}
right={swipeoutBtns}>
<LinearGradient style={{justifyContent: 'center', borderRadius: 30, width: 250, height: 180, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>
<View style={{alignSelf: 'center', justifyContent: 'center', width: 60, height: 60, borderRadius: 60/2, backgroundColor: 'white'}}>
<Text style={{alignSelf: 'center'}}>
{car}
</Text>
</View>
<Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
{collection.item.make}
</Text>
<Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
{collection.item.model}
</Text>
<Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
{collection.item.color}
</Text>
<Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
{collection.item.year}
</Text>
<Text style={{fontWeight: 'bold', color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
{collection.item.licensePlate}
</Text>
</LinearGradient>
</Swipeout>
</View>
);
}
I had to add item.key to the key extractor props. I'm answering this for anyone else that has this problem.
keyExtractor={(item, index) => item.key}
I have tried using both KeyboardAvoidingView and ScrollView to prevent my content from being squished (pushed up) when the keyboard is present. I have tried using padding, height, and position for my behavior but nothing is working. Can someone please tell me how I can force my content to ignore the keyboard and not get pushed up??
return (
<View style={{height: '100%', backgroundColor: '#D6D6D6', position: 'relative'}}>
<View style={styles.wrapper}>
<View style={{height:'100%', borderRadius: 7}}>
<View style={styles.container}>
<ScrollView style={{borderRadius: 7}}
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{nativeEvent: {contentOffset: {x: this.animVal}}}]
)
}
>
{imageArray}
</ScrollView>
<View style={styles.listViewContainer}>
<TouchableOpacity style={styles.listView} onPress={() => Actions.pop()}>
<View style={{flex: 1, flexBasis: 22}}>{listIcon}</View>
<View style={{flex: 2, flexBasis: 57}}><Text style={{color: '#fff'}}>List View</Text></View>
</TouchableOpacity>
</View>
<View style={styles.circleContainer}>
{circleArray}
</View>
</View>
<View style={styles.productsSection}>
<Text style={styles.title}>{prodDesc}</Text>
<Text style={styles.desc}>{prodBrand}</Text>
<Text style={styles.desc}>Item: {prodId || ''}</Text>
<Text style={[styles.desc, {marginBottom: 15}]}>Category: {prodCat}</Text>
<Table borderStyle={{borderWidth: 0}}>
<Rows data={rows}/>
</Table>
</View>
<View style={styles.bodyFooter}>
<QuantityCounter style={{width: '100%', display: 'block', marginRight: 20}} data={{productId: prodId}} />
</View>
</View>
</View>
<View style={styles.footer}>
<View style={styles.cartContainer}>
{cartIcon}
<Text style={{color: '#3A3A3A', fontSize: 14}}>18 items</Text>
</View>
<TouchableOpacity style={styles.viewCartButtonContainer} onPress={() => this.cartRedirect() }>
<Text style={{color: '#fff', fontSize: 15, marginTop: '5%'}}>View Cart</Text>
</TouchableOpacity>
</View>
<Header/>
</View >
);
here are my main styles for this:
var styles = StyleSheet.create({
wrapper: {
backgroundColor: '#E6E6E6',
marginVertical: 15,
marginHorizontal: 10,
borderRadius: 7,
elevation: 3,
maxHeight: '80%',
flexShrink: 1,
zIndex: 0,
marginTop: 75
},
container: {
flex: 1.7,
justifyContent: 'space-between',
alignItems: 'center',
height: '50%',
borderRadius: 7
},
footer: {
justifyContent:'space-between',
alignItems: 'center',
height: '10%',
backgroundColor: '#E6E6E6',
paddingVertical: 15,
paddingHorizontal: 17,
flexDirection: 'row',
borderStyle: 'solid',
borderTopColor: '#8E8E93',
borderTopWidth: 1
},
cartContainer: {
flexDirection: 'row',
width: '35%'
},
viewCartButtonContainer: {
backgroundColor: '#356FAF',
height: '90%',
width: '45%',
padding: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3
},
bodyFooter: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
flex: 0.45,
borderTopColor: '#D6D6D6',
borderTopWidth: 1,
borderStyle: 'solid',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7
},
circleContainer: {
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 10,
flexDirection: 'row',
},
listViewContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
right: 0,
justifyContent: 'center'
},
listView: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderTopRightRadius: 3,
backgroundColor: '#000',
paddingVertical: 5,
paddingHorizontal: 10
},
What it looks like without the keyboard:
What it looks like with the keyboard:
Handling View behavior when toggling a keyboard can be a tricky thing in React Native. There are multiple possible solutions to questions like this, but in this case the solution was this:
Instead of using style={{height:'100%'}} on your components that get pushed up, try using Dimensions:
import {Dimensions} from 'react-native';
const { height } = Dimensions.get('window');
and specify style={{ height }} in the right components.
Another thing that might be worth a try if someone else stumbles on this question:
React Native for Android has some default settings defined in the Android manifest. If you are not using Expo (or CRNA), you can change the behavior of the keyboard in AndroidManifest.xml by changing the windowSoftInputMode rule.
Try changing android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="adjustPan" or to android:windowSoftInputMode="adjustNothing". You can try to play around with some other options (See here) if this doesn't give you the desired effect.
You should use try behavior as "none" for android and if you don't want to getting small, you can set android:windowSoftInputMode="adjustPan" in manifest file.
and if still face any error checkout react-native-keyboard-aware-scrollview
here on npm.
I went through a similar problem and solved it by changing
android:windowSoftInputMode="adjustPan”
In android manifest.
Also clean and rebuild. This might work
remove the position absolute it will works just fine trust me
for some cases if you want keep defualt manifest
you can move your elements inside a Scrollview it may help.
issue solved for me in this way