I have followed this post-React Native flex-box align icon and text to make a button with a title as below:
<View style={styles.sectionHeaderContainer}>
<Text style={styles.heading}>Work</Text>
<TouchableOpacity
style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
onPress={() => {
this.setState(previousState => {
Alert.alert('You tapped the button!')
});
}}>
<Image source={addIcon}/>
<Text style={styles.tertirayTitleDark}>Add Work</Text>
</TouchableOpacity>
</View>
the stylesheet is as below:
sectionHeaderContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: "6%",
paddingTop: "12%",
},
heading: {
fontSize: TITLE,
fontWeight: 'bold',
color: THEME_COLOR,
backgroundColor:'transparent',
},
tertirayTitleDark: {
fontSize: CONTENT_LARGE,
fontWeight: 'bold',
color: COLOR_DARK_PRIMARY,
},
However the button is taking all available horizontal space left by the title:
I have tried many different settings but still can't figure out what I'm doing wrong here.
Just remove flex:1. When you add flex:1 to the styles of the touchableOpacity you are exactly telling it to take all the available space and act just like the provided image. Hope this helps!
The accepted answer for me didn't work. Instead, I had to wrap the entire TouchableOpacity with a View with a given width, i.e.:
<View style={{width: yourDesiredWidth}}>
<TouchableOpacity>
// ...
</TouchableOpacity>
</View>
Related
I am adding image background to my app, but the horizontal part of the image went past the screen (the right and left part got cut). I tried to use resizeMode cover and contain but both of it didn't do anything. Is there any other way to make the image stay within the screen? (I use resizeMode on Image and it contain the image normally {same picture}).
import React from 'react';
import {
Image,
ImageBackground,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {DCTBACKGROUND} from '../../../assets/images';
export default function GetStarted({navigation}) {
return (
<ImageBackground source={DCTBACKGROUND} style={styles.page}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Register');
}}>
<Text style={styles.buttonText}>Registrasi</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Login');
}}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
page: {
backgroundColor: '#90CC8B',
flex: 1,
paddingHorizontal: 15,
paddingVertical: 25,
// resizeMode: 'contain',
},
button: {
backgroundColor: 'yellow',
width: 100,
height: 40,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
},
buttonText: {
color: 'black',
},
buttonContainer: {
justifyContent: 'space-between',
flexDirection: 'row',
},
logo: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});
The image horizontal part got cut a bit and I need to make it all show without being cut.
Add the resizeMode as a direct prop to the ImageBackground and not as part of the StyleSheet.
<ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}>
I know similar questions have been asked before but I couldn't fix this myself. I have an icon and a text that should be displayed on both ends of the screen. The icon should be at the left end while the text should be at the right end.
However, the Text extends the screen and is hidden from the right side, even if I add marginRight or paddingRight. How can I fix this?
export default function App() {
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.topTextContainer}>
<BackArrow containerStyles={styles.arrowContainer} arrowStyles={styles.arrow}></BackArrow>
<Text style={styles.allFavoritePlaces}>Alle Lieblingsorts</Text>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
arrowContainer: {
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
},
arrow: {
color: 'black',
paddingTop: 0,
},
allFavoritePlaces: {
alignItems: 'flex-end',
paddingRight: moderateScale(0),
paddingBottom: moderateScale(10),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingHorizontal: 20,
},
});
Here's a codesandbox too: https://snack.expo.io/#nhammad/sponaneous-candy
I opend it in the dev tools. The container of your arrow has some width assigned to it, when the screen gets to small it pushes the text out of the viewport.
I am rendering an item in a list like this:
return (
<View style={styles.item}>
<View style={styles.nameAddressContainer}>
<Text style={styles.customisedName}>{place.customisedName}</Text>
<Text style={styles.address}>{place.placeName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeletePlace(place.id)}>
<Icon name="trash-o" size={moderateScale(15)} color="black" />
</Button>
</View>
</View>
);
export const styles = StyleSheet.create({
item: {
backgroundColor: '#d7fce4',
borderRadius: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(60),
justifyContent: 'space-between',
flexDirection: 'row',
},
customisedName: {
paddingTop: moderateScale(10),
},
deleteButton: {
backgroundColor: 'white',
width: moderateScale(35),
height: moderateScale(35),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 7,
paddingRight: 7,
position: 'relative',
},
nameAddressContainer: {
flexDirection: 'column',
paddingLeft: moderateScale(10),
},
address: {
fontSize: moderateScale(9),
},
});
When the placeName text is too long, it pushes the button towards the right. The button moves out of the main green view. How can I stop this from happening? Is it possible to fix the button's position while the placeName text hides or moves to the next line?
position: fix is invalid for React Native stylesheets. I have also tried using zIndex but that didn't work either.
Add CSS for nameAddressContainer as
style = {{ flex : 1}}
Put your "deleteButtonContainer" style in "absolute" and add marginRight to your placeName equal to or slightly larger than the width of your DeleteButton.
Something like that:
...,
deleteButtonContainer: {
right: 8,
top: 8,
position: 'absolute',
},
...,
address: {
fontSize: moderateScale(9),
marginRight: moderateScale(38)
},
Previously, I was using toggling to handle navigation. Now I am switching to useNavigation hooks. From one page, I move to another page like this:
<TouchableOpacity
onPress={() => {
if (title == 'h') {
navigation.navigate('AddFriend');
}
}}>
When In navigate to the screen, I see an unwanted white space at the bottom, even though the original design did not have this. However, when I click the Cancelbutton, the space disappear, the page formats according to what it should be like and then it navigates back to the original page. Why is it showing the white space? How can I remove it?
This is how the code for my AddFriend page looks like:
type AddFriendPageProps = {
toggleShowPage: () => void;
showAddFriendPage: boolean;
};
export const AddFriendPage: React.FunctionComponent<AddFriendPageProps> = ({
toggleShowPage,
showAddFriendPage,
}) => {
const [showAddFriendPhonePage, setShowAddFriendPhonePage] = useState(false);
const navigation = useNavigation();
const toggleAddFriendPhonePage = () => {
setShowAddFriendPhonePage(showAddFriendPhonePage ? false : true);
};
return (
<Modal
visible={showAddFriendPage}
animationType="slide" transparent={true}>
<SafeAreaView>
<View style={styles.container}>
<View style={styles.searchTopContainer}>
<View style={styles.searchTopTextContainer}>
<Text
style={styles.searchCancelDoneText}
onPress={() => navigation.navigate('Home')}
>
Cancel
</Text>
<Text style={styles.searchTopMiddleText}>Add Friend</Text>
<Text style={styles.searchCancelDoneText}>Done</Text>
</View>
<View style={styles.searchFieldContainer}>
<View style={styles.buttonContainer}>
<Button
rounded
style={styles.button}
onPress={() => setShowAddFriendPhonePage(true)}>
<Text style={styles.text}>Add by Phone Number</Text>
</Button>
</View>
</View>
</View>
<AddFriendPhonePage
showAddFriendPhonePage={showAddFriendPhonePage}
toggleShowPage={toggleAddFriendPhonePage}
/>
</View>
</SafeAreaView>
</Modal>
);
};
Styles:
const styles = ScaledSheet.create({
container: {
height: '100%',
backgroundColor: 'white', //'#2E3331',
width: '100%',
},
searchTopContainer: {
backgroundColor: '#2E3331',
height: moderateScale(750),
},
searchTopTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingLeft: moderateScale(30),
paddingRight: moderateScale(30),
},
searchCancelDoneText: {
fontSize: moderateScale(14),
color: 'white',
},
searchTopMiddleText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
color: 'white',
},
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
button: {
width: moderateScale(200),
height: moderateScale(50),
backgroundColor: '#31C283',
justifyContent: 'center',
marginBottom: 20,
},
text: {
fontSize: moderateScale(14, 0.7),
},
searchField: {
backgroundColor: 'white',
width: moderateScale(300, 0.3),
height: verticalScale(40),
marginVertical: moderateScale(6),
borderRadius: verticalScale(10),
},
buttonContainer: {
paddingTop: 250,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between',
},
inputText: {
color: '#ffffff',
},
searchText: {
fontSize: moderateScale(14),
},
});
If I change the background color the container to red and apply that style on the safeView, it makes the top part (where the time is written) red along with the bottom part which is supposed to match with the other screen. Both come under the safeView thing. How do I separate them?
If I remove the SafeView, the whole screen moves upwards, apart from the Cancel and Done button. The white space increases even more
that white space is added by safeAreaView. if you want the safeAreaView to have the same green background color you have to set the styles on it or it's parent, you currently only have styles on the child View element with the styles.container
I dont understand what you mean by 'how do i separate them'. basically, if you see the red color appear when you apply styles on the safeAreaView then instead of red use the gray/green color on the safeAreaView (that you're already using for the rest of the screen) so that it looks seamless.
I tried many ways but unfortunately it still doesn't work please help me out!
I've tried reversing the Text and Icon but still doesn't work
Here is the class
export class More extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.list}>
<View style={styles.hairline}>
<Text style={styles.text}>
<Text>أضف إعلانك</Text>
<Icon name="ios-add" size={20}/>
</Text>
</View>
<View style={styles.hairline}>
<Text style={styles.text}><Icon name="ios-heart" size={20}/> إعلانات المفضلة</Text>
</View>
</View>
</View>
);
}
}
Here is the StyleSheet
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
list: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'flext-start',
},
text: {
padding: 10,
textAlign: 'right',
alignSelf: 'stretch',
},
icon: {
flexDirection: 'row',
alignItems: 'flex-end'
},
hairline: {
borderBottomColor: '#A2A2A2',
borderBottomWidth: 1,
},
});
I want the Icon to show up on the right side of the text not the left side.
Try this:
const TextWithIcon = ({ text, iconName }) => (
<View
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}
>
<View style={{ marginRight: 8 }}>
<Text>{text}</Text>
</View>
<Icon name={iconName} size={20} />
</View>
);