I have an issue with the text of the TabBar that is not written on same line like shown in the photo. On small screen (Iphone 12) it works perfectly but when i changed to big screen of (Ipad 12.9 inch) How can i prevent that?
I have my code:
<Tab.Screen
name="Shop"
component={ShopNavigator}
options={(navigation, route) => ({
title: 'Shop',
tabBarVisible: false,
tabBarIcon: ({ props, focused }) => (
<View {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={SHOP} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Vente en ligne</Text>
</View>
</View>
)
})}
/>
imgSize: {
height: 30,
width: 30,
padding: 15,
opacity: 0.8,
},
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
}
Just give it more space:
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
width: "100%" //should take. 100% of the available space
}
I would also add the numberOfLines = 1 prop to the Text component to prevent incredibly small screens
Nothing works except returning empty function for renderLabel then having renderIcon display icon and text (placed side by side)
here is the code for more understanding
const renderTabBar = props => {
return <TabBar
{...props}
indicatorStyle={{ backgroundColor: 'grey' }}
style={{ backgroundColor: '#fff' }}
renderIcon={({ route, focused, color }) => {
return <Text style={{ color: '#000', margin: 8 }}><AntIcon
size={13}
name={route?.icon}
color={'#000'}
/>
{" "} {route.title}
</Text>}
}
renderLabel={({ route, focused, color }) => {}}
/>
}
Related
I have written following code but my flex under 'titleContainer' is not working.
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 0.5,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
Please see the screen shot. The green background should cover half of the screen.
Its resolved now!
Actually this component was getting displayed conditionally. There was an issue with that condition. I have fixed that and everything worked.
Flex in RN only take interger value
In case you want titleContainer take 50% size of container by using flex, This is how you can achieve that.
You need another view the take the same flex value with titleContainer, so titleContainer and that dump view will take 50% size of parent view each
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
<View style={{flex: 1}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 1,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
To use flex property on child tag your parent tag needs to have a display: "flex" property on it.
container: {
display: 'flex',
flexDirection: 'column',
flex: 1,
backgroundColor: '#43840',
},
I'm having trouble trying to display a list of Views using flex with 100% height, the issue comes when it renders the list from Flat list, I might do something wrong with flex.
This is what I want: A Flat list with same height when scrolls I will go to another component
And this is What I am having a smashed List of all the rendered views
The flatList is just this :
<FlatList
pagingEnabled={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
And the container from the Views I am rendering looks like this (css)
container: {
alignItems: 'center',
// TODO: check how why the screen is forguetting the tab, thats why I put the height like that
width: '100%',
height: '100%',
justifyContent: 'space-around',
flex: 1,
},
Use onLayout to get the height of the parent container and use that to set the height of FlatList items:
Example Output:
Full source code:
//import { List, ListItem } from 'react-native-elements';
import React, { useState } from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
SafeAreaView,
StatusBar,
} from 'react-native';
const attendants = [
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 1,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '09/11/2020',
no: 2,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 3,
},
];
const App = () => {
const [data, setData] = useState(attendants);
const [layoutHeight, setHeight] = useState(100);
return (
<View style={styles.container}>
<View style={{ flex: 5 }}>
<FlatList
onLayout={(e) => {
setHeight(e.nativeEvent.layout.height);
console.log(e.nativeEvent.layout.height);
}}
style={{ flexGrow: 1, backgroundColor: 'pink', height: layoutHeight }}
data={data}
keyExtractor={(item) => item.no}
renderItem={({ item }) => (
<View
style={{
height: layoutHeight
}}>
<ListItem
customStyle={{ backgroundColor: 'black' }}
title={`${item.lecturer} ${item.courseName}`}
subtitle={item.students}
/>
</View>
)}
/>
</View>
<View
style={{
flex: 1,
backgroundColor: 'lightgreen',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={[styles.subtitle, { fontSize: 20 }]}>Bottom Bar</Text>
</View>
</View>
);
};
const ListItem = ({ title, subtitle, customStyle }) => {
return (
<View style={styles.listContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 30,
flex: 1,
},
listContainer: {
flex: 1,
backgroundColor: 'teal',
margin: 5,
paddingHorizontal: 5,
borderRadius: 4,
},
subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
title: {
fontSize: 14,
color: 'white',
fontWeight: 'bold',
textAlign: 'cetere',
},
});
export default App;
You can find the working app example here: Expo Snack
Flatlist is scrollview with many item inside and ScrollView content will calculator height of children render on it. So any item render on it need set height. height 100% will get height of parent and set for itself so you can not using height of scrollview content (infinity) and set for item inside.
A few issues with my visualization:
The text on my first button appears on the right end of the button, even though I have aligned it to the center. How can I shift the text 'login' to the center?
Currently, the 'Sign Up Here' text appears in the mid of the screen. I want it towards the end. However, when I increase the value for marginTop, the text disappears. For instance if I change it to 20, I can see only half of it (in the middle of the screen). If I increase it further it just disappears.
The Forgot Password text also appears on the left side even though I have aligned it.
The title 'My App' does not appear at all.
How can I fix these minor issues?
<Container View style={styles.container}>
<Text View style={styles.title}>
Instaride</Text>
<View style={{flex:1}}></View>
<Form View style={styles.formInput}>
<Item floatingLabel>
<Label View style={styles.labelText}>Username</Label>
<Input
View style={styles.textInput}
onChangeText={(textUname) => uname(textUname)}
value={textUname}
placeholder={'Username'}
/>
</Item>
<Item floatingLabel >
<Label View style={styles.labelText}>Password</Label>
<Input
View style={styles.textInput}
onChangeText={(textPassword) => password(textPassword)}
value={textPassword}
placeholder={'Password'}
secureTextEntry={true}
/>
</Item>
</Form>
<Button View style={styles.button}
onPress={() => navigation.navigate("Details")}>
<Text>Login</Text>
</Button>
<Text View style={styles.forgotText}>
Forgot Password?</Text>
<Right>
<Button hasText transparent onPress={() => navigation.navigate('Registration')}>
<Text View style={styles.signupText}>
Don't have an account? Sign Up Here</Text>
</Button>
</Right>
</Container>
);
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#242625',
paddingTop: getStatusBarHeight(),
},
title: {
textAlign: 'center',
fontSize: 22,
color: 'white',
},
textInput: {
color: 'white',
},
button: {
marginTop: 15,
backgroundColor: '#65c756',
width: '70%',
height: '6%',
justifyContent: 'center',
alignSelf: 'center'
},
forgotText: {
marginTop: 15,
justifyContent: 'center',
textAlign: 'center',
color: 'white',
},
signupText: {
marginTop: 16,
justifyContent: 'center',
color: 'white',
},
labelText: {
fontSize : 14,
},
formInput: {
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20,
marginTop: 40,
},
});
UPDATE:
You don't need to use Input View, as that's not the right way.
The below code works and you can check in the Expo demo, you need to add full in the Button.
Answers to the points:
You don't need Left/Right, you can simply put it in View, Left was causing the issue.
Use flex:1 on the Middle Part, so it will grow and occupy the screen and will push your Sign Up here at the bottom
Forget password is pushed to the center
We used getStatusBarHeight and have padding equal to the statusBarHeight
import * as React from "react";
import {
Text,
View,
StyleSheet,
Container,
Form,
Item,
Label,
Input,
Left,
Right,
Button,
Content
} from "native-base";
import { SafeAreaView } from "react-native";
import Constants from "expo-constants";
import { getStatusBarHeight } from "react-native-status-bar-height";
// You can import from local files
import AssetExample from "./components/AssetExample";
// or any pure javascript modules available in npm
import { Card } from "react-native-paper";
export default class App extends React.Component {
render() {
return (
<Container
View
style={Object.assign(
{ ...styles.container },
{ marginTop: getStatusBarHeight() }
)}
>
<Content contentContainerStyle={{ flex: 1 }}>
<View>
<Text style={styles.title}>Instaride</Text>
</View>
<View style={{ flex: 1 }}>
<Form style={Object.assign({ ...styles.formInput }, { flex: 1 })}>
<Item floatingLabel>
<Label style={styles.labelText}>Username</Label>
<Input style={styles.textInput} placeholder={"Username"} />
</Item>
<Item floatingLabel>
<Label style={styles.labelText}>Password</Label>
<Input
View
style={styles.textInput}
placeholder={"Password"}
secureTextEntry={true}
/>
</Item>
<Button
full
style={styles.button}
onPress={() => navigation.navigate("Details")}
>
<Text>Login</Text>
</Button>
</Form>
</View>
<View>
<Text View style={styles.forgotText}>
Forgot Password?
</Text>
<Button
hasText
transparent
onPress={() => navigation.navigate("Registration")}
style={{ justifyContent: "center" }}
>
<Text style={styles.signupText}>
Don't have an account? Sign Up Here
</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
const styles = {
container: {
flex: 1,
backgroundColor: "#242625",
borderWidth: 2,
borderColor: "red"
},
title: {
textAlign: "center",
fontSize: 22,
color: "white"
},
textInput: {
color: "white"
},
button: {
marginTop: 15,
backgroundColor: "#65c756"
},
forgotText: {
marginTop: 15,
justifyContent: "center",
textAlign: "center",
color: "white"
},
signupText: {
textAlign: "center",
justifyContent: "center",
color: "white"
},
labelText: {
fontSize: 14
},
formInput: {
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20
}
};
Temporary Link to Expo: https://snack.expo.io/#dhavaljardosh/8af9d3
I'm trying to center the next button at the bottom of the page. Instead of being at the bottom of the page it's stick in the middle of the page. Any help?
Screen shot:
Screen Shot
export default class Type extends Component {
constructor(props) {
super(props)
this.state = {
selected: 'user'
}
}
_select(selected) {
this.setState({ selected })
}
_renderButton(type, photo, width, height, buttonStyles) {
const { selected } = this.state
if (selected === type)
return (
<TouchableOpacity style={ styles.buttonSelected } onPress={ e => this._select(type) }>
<Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
</TouchableOpacity>
)
return (
<TouchableOpacity style={ styles.button } onPress={ e => this._select(type) }>
<Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
</TouchableOpacity>
)
}
_renderText(text, type, textStyles) {
const { selected } = this.state
if (selected === type)
return <Text style={[ styles.text, styles.textSelected, textStyles ]}>{ text }</Text>
return <Text style={[ styles.text, textStyles ]}>{ text }</Text>
}
render() {
return (
<ScrollView style={ styles.container }>
<Text style={ styles.question }>Who are you?</Text>
<View style={ styles.buttons }>
{ this._renderButton('user', boy, 64, 64, { top: 15, left: 20 }) }
{ this._renderButton('carnival', ticket, 72, 72, { top: 10, left: 15 })}
</View>
<View style={ styles.texts }>
{ this._renderText('Attendee', 'user', { left: -12 }) }
{ this._renderText('Carnival', 'carnival', { left: 8 }) }
</View>
<TouchableOpacity style={ styles.nextButton }>
<Text style={ styles.nextText }>
Next Step
</Text>
</TouchableOpacity>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
question: {
paddingTop: '30%',
textAlign: 'center',
color: '#ccc',
fontSize: 24,
marginBottom: 30
},
buttons: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center'
},
button: {
width: width/3,
height: width/3,
borderRadius: (width/3)/2,
borderWidth: 1,
borderColor: '#e6e6e6',
marginLeft: 10,
marginRight: 10
},
buttonPhoto: {
position: 'relative'
},
buttonSelected: {
width: width/3,
height: width/3,
borderRadius: (width/3)/2,
borderWidth: 1,
borderColor: '#ff9972',
marginLeft: 10,
marginRight: 10
},
texts: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 12
},
text: {
width: width/3,
color: '#b5b5b5',
textAlign: 'center',
},
textSelected: {
color: '#ff9972'
},
nextButton: {
position: 'absolute',
left: (width/1.5)/2,
bottom: 5,
paddingTop: 10,
backgroundColor: '#ff6b5d',
width: width/1.5,
height: 48,
borderRadius: 5,
borderBottomWidth: 2,
borderBottomColor: '#de5244',
},
nextText: {
fontSize: 16,
color: '#fff',
textAlign: 'center'
}
})
This has been giving me issues for hours now. Looking for a simple solution that is what professional developers use.
Ignore:
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
Instead of using <ScrollView> as Parent, you can use <ScrollView> inside of <View> and have something similar to the below structure.
<View>
<ScrollView style={{flex:1}}>
{/*All of your screen */}
</ScrollView>
<View>
<TouchableOpacity style={ styles.nextButton }>
<Text style={ styles.nextText }>
Next Step
</Text>
</TouchableOpacity>
</View>
</View>
The button will always stay at bottom of the page.
I'm setting up some screens for an app using React-Native, and I want to fully understand how Flexbox works.
I'm trying to set the marginHorizontal property in style of textinput and button, but nothing happens.
If I set the specific value of width I do not have any problem.
Why marginHorizontal does not work properly?
The first image is what I get using marginHorizontal (the size of the button doesn't change and the margin from board is not 10);
The second image is what I get when I use width prop (the button size changes according the value of width).
I just wonder why with the marginHorizontal prop, nothing happens.
import React, { Component } from 'react'
import {Text, StyleSheet, View, TextInput, TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper';
import {Button} from 'react-native-elements'
const formInputColor = 'rgba(255, 255, 255, 0.2)'
const formInputPlaceholderColor = 'rgba(255, 255, 255, 0.7)'
export default class RegisterFormComponent extends Component{
render(){
return(
<Swiper
style={styles.wrapper}
loop = {false}
>
<View style={styles.slide1}>
<View style={styles.topContainer1}>
<Text
style={styles.text}>What's you mail?
</Text>
<TextInput
placeholder = "Email"
placeholderTextColor = {formInputPlaceholderColor}
returnKeyType = "next"
style = {styles.formInput}
/>
<Text
style={styles.underText}
multiline={true}>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</Text>
<Button
style={styles.buttonStyle}
//textStyle = {styles.buttonTextStyle}
//loading={false}
>
</Button>
</View>
<View style={styles.bottomContainer1}>
</View>
</View>
<View style={styles.slide2}>
<View style={styles.topContainer1}>
<Text
style={styles.text}>Choose your password
</Text>
<TextInput
placeholder = "Password"
placeholderTextColor = {formInputPlaceholderColor}
secureTextEntry
returnKeyType = "go"
style = {styles.formInput}
/>
</View>
<View style={styles.bottomContainer1}>
</View>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
)
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1
},
slide1: {
flex: 1,
backgroundColor: '#3498db',
},
buttonStyle: {
backgroundColor: '#2980b9',
marginTop: 10,
height: 25,
marginHorizontal: 10
},
buttonTextStyle: {
fontSize: 10
},
topContainer1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
logoStyle: {
width: 100,
height: 100,
},
bottomContainer1: {
flex: 1,
},
formInput:{
height: 40,
backgroundColor: formInputColor,
color: '#FFF',
marginHorizontal: 10,
paddingHorizontal: 10,
textAlignVertical: 'top'
},
slide2: {
flex: 1,
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#000',
fontSize: 20,
padding: 10,
fontWeight: 'bold'
},
underText: {
color: 'black',
fontSize: 12,
marginTop: 8,
textAlign: 'center',
width: 300
}
})