Develop Reference

React Native Elements marginEnd wont position element to the right of its parent container

I have some nested components: TEXT and an Image.
I would like the button in the blue box to move to the right in the black box (parent).
marginRight: 0 and marginEnd: 0 arent working. How can I accomplish this?
What is currently Happening.
What I want.
<View style={styles.profileButton}>
<Text style={{fontSize: 20}}>Tap to add a profile!</Text>
<TouchableOpacity>
<View style={styles.TouchableOpacity}>
<Image
style={styles.addprofilebutton}
source={require('../assets/addProfileButtonTeal.png')}>
</Image>
</View>
</TouchableOpacity>
</View>
StyleSheet
profileButton: {
zIndex:5,
flex: 1,
position: 'absolute',
bottom: '10%',
right: '3%',
justifyContent: 'flex-end'
},
TouchableOpacity: {
marginEnd: 0,
},
addprofilebutton: {
width: 100,
height: 100,
marginRight: 0
}

TouchableOpacity: {
alignItems:'flex-end'
}
or
TouchableOpacity: {
alignSelf:'flex-end'
}

Flexbox - React Native

i am new to react native and i am trying to make a chat app layout.
As you can see in screenshot that i have attached, i want text box to take as much space as the text in it. For example, if i send 'Hi', it should only be stretched as much space 'Hi' needs.
If i send a long text, then it should stretch and take as much space as that text is. Like it happens in almost all texting apps.
The text box code is:
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{flex: 3}}>
<Text style={styles.message}>{item.message}</Text>
</View>
<View style={{flex: 1}}>
<Image
source={require('../assets/images/check.png')}
style={styles.image}
/>
<Text style={{textAlign: 'right', color: 'white'}}>
{msToTime(item.timestamp)}
</Text>
</View>
</View>
</TouchableOpacity>
Stylesheet
containerSent: {
flex: 1,
maxWidth: '70%',
// minWidth: '30%',
marginTop: 20,
paddingTop: 20,
paddingHorizontal: 10,
paddingBottom: 10,
borderWidth: 1,
backgroundColor: '#6F2232',
borderRadius: 20,
alignSelf: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
// justifyContent: 'flex-end',
},
message: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
textAlign: 'left',
alignSelf: 'stretch',
},
image: {
width: 15,
height: 15,
marginLeft: 20,
marginBottom: 5,
alignSelf: 'flex-end',
},

How I have implemented this is that I removed flex: 3 and flex: 1 from both the elements so that they don't expand to take the max space, and I added flexShrink: 1 to the text, so that it always shrinks keeping the right element intact.
Snack link

Set View style to flex: 0 so it‘s just taken as Maus h space as necessary.
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{ flex: 0 }}>
<Text style={styles.message}>{'q.a'}</Text>
</View>
<View style={{ flex: 0, paddingLeft: 10 }}>
<Text style={styles.message}>{'eeeee.message'}</Text>
</View>
</View>
</TouchableOpacity>
Take a look at my sample

How to vertically and horizontally align child components 'on top' of parent in React Native?

I'm having a lot of trouble getting two child components to vertically and horizontally align 'on top' of their parent element in React Native.
I am trying to place Loader and Button on top of RTCView.
I currently have this JSX returning in the parent:
if (localStream) {
return (
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={localStream.toURL()} />
<View
style={{ justifyContent: 'center', position: 'absolute', }}
>
<Loader
title={callDetails}
>
</Loader>
<Button
mode="contained"
style={{ width: 150, margin: 100 }}
onPress={handleCancelCall}>
Cancel
</Button>
</View>
</View>
);
}
And this inside Loader:
Loader = props => {
return (
<>
<StatusBar
hidden
/>
<View style={{
flex: 1,
alignItems: 'center',
}}>
<Text
style={styles.text}
>
{props.title}
</Text>
<ProgressBar color={Colors.green800} indeterminate={true} style={{ width: 100, height: 1 }} />
</View>
</>
)
}
const styles = StyleSheet.create({
text: {
fontFamily: "Quicksand-Light",
fontSize: 22,
textAlign: "center",
color: "#333333",
marginBottom: 25,
justifyContent: 'center',
}
});
Whilst I have achieved getting Loader to display 'on top' of it's parent, I cannot move them to their position at the top of the screen.
Any help would be much appreciated!

Your absolute positioned View needs to cover its parent. You can achieve this by adding top: 0, left: 0, right: 0, bottom: 0 to its style
You may need to edit your Button style. I removed it from your code, add it if you need margin or a specific width.
<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<Loader title={callDetails} />
<Button mode="contained" onPress={handleCancelCall}>Cancel</Button>
</View>

React Native: How do I set a button to be at the level of 70% of the height of its parent?

Suppose I want to position a button 30% of the way the down its parent element (i.e. the whole page) in React Native. How do I do this using Flexbox or some other method?
For example, adding justifyContent: 'center' to the parent element would work if I wanted the button to be 50% of the way down the page.
Here is my React layout / stylesheet:
<View style={styles.container}>
<LinearGradient colors={['#e80ca3', '#e500ff', '#950ce8']} style={styles.linearGradient}>
<View style={styles.scanContainer}>
<View style={styles.scanButton} />
</View>
</LinearGradient>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
linearGradient: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'center', // What to put here to make `scanContainer` 30% instead of 50% of the way down?
},
scanContainer: {
alignSelf: 'center',
},
scanButton: {
width: 175,
height: 175,
borderRadius: 87.5,
backgroundColor: 'green',
},
});

Here's the solution using flex properties
linearGradient: {
flex: 1,
alignSelf: 'stretch', //... Remove justifyContent: 'center',
},
scanContainer: {
flex: 0.7,
justifyContent: 'flex-end', // 30 % from the bottom
alignSelf: 'center',
},

You can add an empty View with flex 0.7 above the button:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.7 }} />
<Button title="button" />
</View>

You can use absolute positioning for the button container.
scanContainer: {
alignSelf: 'center',
position: 'absolute',
bottom: '30%',
left: 0
}

Using flex:
<View style={[styles.scanContainer,{flex:1}]}>
<View style={{flex:1}} />
<View style={styles.scanButton} />
<View style={{flex:2}} />
</View>
Using Dimension:
import {Dimensions} from 'react-native';
<View style={[styles.scanButton,{marginTop:Dimensions.get('window').height * 0.3}]} />

Nesting React Native Content Messes With Layout

I'm building a react native app, and I had to make a custom button component.
When I was prototyping my interface, all of my buttons were just <View>. When I was finished making my new component, I just replaced those <View> tags with the name of my component <SOCButton>. After doing so, the layout of the content inside the button is completely messed up.
This is how it looked using the <View> component:
Here's how it looks with my custom component:
Here's the code for my component:
<TouchableWithoutFeedback onPressIn={this.depressed.bind(this)} onPressOut={this.unpressed.bind(this)}>
<Animated.View style={[pressedStyle,{flex:1}]}>
{this.props.children}
</Animated.View>
</TouchableWithoutFeedback>
Here's where it's used:
<View style={styles.RecentPOV}>
<View style={styles.RecentPOVProfilePicContainer}>
<Image style={styles.RecentPOVProfilePic} source={{uri:'https://pbs.twimg.com/profile_images/824476541384097793/qGw1Whej.jpg'}}/>
<Text style={styles.RecentPOVUserRating}>4.0</Text>
</View>
<View style={styles.RecentPOVInfoContainer}>
<Text style={styles.RecentPOVUser}>Jack Kalina</Text>
<View style={styles.RecentPOVStars}>
<View style={styles.FullStarsContainer}>
<Image style={styles.FullStars} source={StarShape.Full}/>
<View style={StarMaskStyle.RecentPOVStarMask}></View>
</View>
<Image style={styles.EmptyStars} source={StarShape.Empty}/>
</View>
<Text style={styles.RecentPOVTimestamp}>February 2nd, 12:14 PM</Text>
</View>
</View>
And the relevant styling:
RecentPOV: {
backgroundColor: '#e8e8e8',
width: '100%',
height: null,
marginVertical: 15,
borderRadius: 20,
padding: 15,
flexDirection:'row'
},
RecentPOVProfilePic: {
height: 100,
width: 100,
borderRadius: 10
},
RecentPOVProfilePicContainer: {
alignItems: 'flex-end'
},
RecentPOVInfoContainer: {
marginLeft: 20
},
RecentPOVUserRating: {
position:'absolute',
fontSize:30,
fontWeight: '900',
color: 'white',
top:62,
right:4,
textAlign:'right',
flex: 1
},
RecentPOVStars: {
flex: 1,
top: -33,
width: '110%'
},
RecentPOVUser: {
flex: 1,
color: '#2b2b2b',
fontSize: 20,
fontWeight: 'bold'
},
RecentPOVTimestamp: {
flex: 1,
top: 15,
color: '#636363',
fontSize:15
}