We Keep Coding

Absolute positioning causes React Native component to go off screen

One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen. I've tried setting position: "absolute" and bottom: 0, however, this just causes the element to be a few hundred pixels below the screen. How can I make my TouchableOpacity be at the bottom of the screen all the time?
<View style={styles.mainView}>
<View style={{ position: "relative" }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
}
/>
</View>
//styles
const styles = StyleSheet.create({
mainView: {
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "white",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});

We could handle this without absolute positioning using flex alone.
Add flex:1 to the parent view and to the view that wraps the sticky bottom. Then, add flex: 2 to the view that wraps the other content.
Here is a minimal generic component that lets you add a sticky bottom component.
const MainScreen = ({bottom, children}) => {
return <View style={{flex: 1, backgroundColor: 'red'}}>
<View style={{flex: 2, backgroundColor: 'green'}}>
{children}
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}}>
{bottom}
</View>
</View>
}
export default function App() {
return <MainScreen bottom={
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>}>
</MainScreen>
}
The result looks as follows:
However, we can use absolute positioning as well. You are just missing the flex: 1 for the parent view.
export default function App() {
return <View style={styles.mainView}>
<View style={{ position: "absolute", bottom: 0 }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>
</View>
</View>
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "red",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
backgroundColor: "yellow",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
The result is as follows:

if you are using position as absolute then your view must be last view before last closed view tag
When you have declared any view at bottom of the screen then you should be do like this
import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
</View>
</SafeAreaView >

Having issue to stretch text input fully?

I'm having a problem to stretch the text input fully till the whole "item.membername" comes into a row like created UI. Currently the "item.membername" goes to second line because of a long string membername. Please do help me out. Below I have attached the UI pictures along with code.
Created UI:
Current UI:
ApprovedScreen.js
import React, {useState} from 'react';
import {GrayCustomView} from './../components/styles';
import {View, Text, TouchableOpacity, Image, FlatList} from 'react-native';
import GlobalStyle from '../components/GlobalStyle';
import {ApprovedReceiptData} from '../constants/dummy'
import { useNavigation } from '#react-navigation/native';
const ApprovedReceiptScreen = () => {
const navigation = useNavigation();
const renderItem = ({item}) => (
<GrayCustomView>
{item.membername === 'No Receipt History' ? (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
<View style={[GlobalStyle.ReceiptUpperContainer]}>
<Text style={[GlobalStyle.ReceiptDetails5]}>{item.membername}</Text>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]} activeOpacity={0.8} onPress={() => {navigation.navigate('ReceiptDetailsScreen',{migrateData: item});}}>
<View style={[GlobalStyle.LeftContainer]}>
<View style={[GlobalStyle.UpperContainer]}>
<View style={[GlobalStyle.ReceiptHeader]}>
<Text style={[GlobalStyle.ReceiptListTitle]}>{item.receiptnum}</Text>
</View>
</View>
<View style={[GlobalStyle.LowerLeftContainer]}>
<View style={[GlobalStyle.ReceiptImageView]}>
<Image style={[GlobalStyle.ReceiptImageList]} source={{uri: item.memberImage}}/>
</View>
<View style={[GlobalStyle.LowerRightContainer]}>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.membername}</Text>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.date}</Text>
</View>
</View>
</View>
<View style={[GlobalStyle.RightContainer]}>
<View style={[GlobalStyle.RightUpperContainer]}>
<Text style={[GlobalStyle.ReceiptListTitle1]}>{item.points}</Text>
</View>
<View style={[GlobalStyle.RightLowerContainer]}>
<Text style={[GlobalStyle.ReceiptDetails4]}>{item.receiptamount}</Text>
</View>
</View>
</TouchableOpacity>
)}
</GrayCustomView>
)
Globalstyle.js
ApprovedButtonContainer:{
width: DEVICE_WIDTH * 0.86,
height: DEVICE_HEIGHT * 0.20,
backgroundColor: white,
elevation: 11,
marginLeft: 30,
borderRadius: 6,
marginBottom: 10,
marginTop: 20,
flexDirection: 'row'
},
LeftContainer:{
flex: 2
},
UpperContainer:{
flex: 1,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptImageList:{
width: DEVICE_WIDTH * 0.15,
height: DEVICE_HEIGHT * 0.09,
backgroundColor: empty,
borderRadius: 6,
marginTop: 10,
marginLeft: 5
},
LowerLeftContainer:{
flex: 2,
flexDirection: 'row',
},
ReceiptImageView:{
flex: 1,
padding: 5
},
LowerRightContainer:{
flex: 2,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptDetails1:{
color: black,
fontSize: 14,
fontWeight: 'normal',
backgroundColor: empty,
},
RightContainer:{
flex: 1,
},
RightUpperContainer:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptListTitle1:{
color: black,
fontWeight: 'bold',
fontSize: 17
},
RightLowerContainer:{
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptDetails4:{
color: black,
fontSize: 22,
fontWeight: 'bold',
},
ReceiptListTitle:{
color: black,
fontSize: 17,
fontWeight: 'bold',
},
})

React Native ScrollView Horizontal not working

I'm new to react native, and I'm trying to put a horizontal scrollview on my screen.
I've tried to put <ScrollView horizontal={true}> but it's not working at all, I want the blue box scrollable.
here' the image of my screen :
and this for my component code :
import React from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';
export default function Body() {
return (
<View>
<View style={styles.jadwal}>
<ScrollView horizontal={true}>
<View style={styles.box}>
<Text style={styles.title}>Math</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>3 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
<View style={styles.box}>
<Text style={styles.title}>Biology</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>10 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
jadwal: {
marginLeft: 10,
flexDirection: 'row',
justifyContent: 'flex-start',
position: 'absolute',
},
box: {
height: 100,
width: 230,
borderRadius: 10,
backgroundColor: '#327fe3',
marginLeft: 10,
},
alert: {
height: 20,
marginLeft: 15,
width: 80,
borderRadius: 10,
backgroundColor: '#7CD5FF',
},
title: {
marginTop: 20,
marginLeft: 20,
fontFamily: 'MontserratSemiBold',
fontSize: 15,
color: '#fff',
},
pr: {
marginLeft: 14,
fontSize: 8,
color: '#fff',
marginTop: 4,
justifyContent: 'flex-start',
fontFamily: 'MontserratLight',
},
wrap: {
marginTop: 5,
},
img: {
height: 50,
width: 50,
marginLeft: 140,
marginTop: -35,
},
});
is there anything wrong ?, did I put the <ScrollView> on wrong position ?
Thanks for reading this, and sorry for my bad english.

There's one error of font-family cause, this font is not installed in my laptop.
Overall your scroll view is working fine.
Note: scroll view is scrolling area is in between the opening and closing tag of scroll.

How to align child views to left with even space in React-Native?

I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way
The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.
My current code is as follows
import React from 'react';
import { StyleSheet, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
},
box: {
width: 100,
height: 100,
backgroundColor: 'aqua',
margin: 10,
}
});
The current output is as below
The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.
How do i align it to left and have the items with even space around as the image above ?

for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
},
box: {
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
}
});

One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create({
boxFake: {
backgroundColor: 'transparent'
}
});
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow

I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 110
};
}
render() {
//width of child is 110
const width = `${100 / parseInt(this.state.width / 110)}%`;
return (
<ScrollView>
<View style={styles.container} onLayout={this.onLayout.bind(this)}>
<View style={[styles.wrapper, { width: width }]}>
<View style={styles.box}></View>
</View>
<View style={[styles.wrapper, { width: width }]}>
<View style={styles.box}></View>
</View>
<View style={[styles.wrapper, { width: width }]}>
<View style={styles.box}></View>
</View>
<View style={[styles.wrapper, { width: width }]}>
<View style={styles.box}></View>
</View>
<View style={[styles.wrapper, { width: width }]}>
<View style={styles.box}></View>
</View>
</View>
</ScrollView>
);
}
onLayout(e) {
if (this.state.width !== e.nativeEvent.layout.width) {
this.setState({
width: e.nativeEvent.layout.width
})
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
},
box: {
width: 100,
height: 100,
backgroundColor: 'green',
},
wrapper: {
marginVertical: 10, alignItems: 'center'
}
});

React Native: TextInput disappears when put into View

Currently I'm learning React Native with the help of a book in which is explained how to build a to do app. However I can't continue because of this error/bug. This is happening in IOS, not sure if this also happens on Android as I haven't set up my Android emulator just jet.
My <View> container has two <TextInputs>, working fine.
When I wrap both inputs into views, they simply 'disappear'.
Here is my component NoteScreen.js:
import React, {
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={styles.body}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});
I did some research and noticed some weird things;
Both of my inputs have a width and a height
The inputs vanish also if they don't have any styles applied to them
This only happens with text inputs, normal text just renders.
Some insight would be great, I'm thinking this is a bug, or I am just overlooking something..

I tried your example (on android), and with exact code you provided, screen is completely empty. Without styles on text input, they are not showing, and you've set styles.title and styles.body to your TextInput components -> in styles.title and styles.body you don't have (both) width and height. So what you can do is:
Add width to your title and body styles
or
Add styles to text input in array and apply both styles for textInput and for title/body like this: style={[styles.textInput, styles.title]} and style={[styles.textInput, styles.body]}
Here is working code for both suggestions i gave you:
import React, {
AppRegistry,
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40,
width: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});

I believe we are reading the same book, becausee I had the same problem.
I solved it by removing the alignItems: 'center' in the container style and adding flex: 1 to the inputContainer style. It still doesn't look like the book sample, but at least the fields are now visible.
Here's what my code looks like:
import React, { StyleSheet, Text, TextInput, View } from "react-native";
import dismissKeyboard from "dismissKeyboard";
export default class NoteScreen extends React.Component {
render() {
handleTitleEditingEnd = (text) => { this.refs.body.focus(); };
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
placeholder="Untitled"
style={[styles.textInput, styles.title]}
onEndEditing={handleTitleEditingEnd}
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
// alignItems: "center",
marginTop: 64
},
inputContainer: {
borderBottomColor: "#9E7CE3",
borderBottomWidth: 1,
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
textInput: {
flex: 1,
fontSize: 16,
},
title: {
height: 40,
},
body: {
flex: 1,
}
});

If your <Text> don't have height in your <View>, try removing flex : 1 from your container.

I solved it with code below:
import React, {
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, styles.title]} onEndEditing={(text) => {this.refs.body.focus()} }/>
</View>
<View style={styles.inputContainer}>
<TextInput ref="body" multiline={true} placeholder="Start typing" style={[styles.textInput, styles.body]}/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 64
},
title: {
height: 40
},
body: {
height: 160,
flex: 1
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flexDirection: 'row',
marginBottom: 10
},
textInput: {
flex: 1,
fontSize: 16,
width: 300,
}
});