I'm making simple To-Do application using React Native, just watching YouTube. The difference video and me is My version is latest RN, and simulating app in Android.
The code looks like same but my TextInput width is not 100%, but very small element as you can see
My code is below, How to fix it?
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
export default class Main extends Component {
render() {
return (
<View style={styles.wrapper}>
<View style={styles.topBar}>
<Text style={styles.title}>
To-Do List
</Text>
</View>
<View style={styles.inputWrapper}>
<TextInput
style={styles.input}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'stretch'
},
topBar: {
padding: 16,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2ecc71'
},
title: {
color: 'white',
fontSize: 20
},
inputWrapper: {
padding: 10,
flexDirection: 'row',
alignItems: 'stretch',
backgroundColor: 'green',
borderColor: 'red'
},
input: {
height: 26,
borderRadius: 8,
backgroundColor: 'white'
}
});
Try removing the flexDirection style from inputWrapper.
See it here.
Related
I'm currently making an fitness app and would like to have a "start session" button on showcase of workout page... I've tried making it absolute and stuff like that, but when I scroll down the page the button is fixed to certain part of the page, But I would like it to go down and stay in the same view whenever I scroll.
This is my code:
import React from 'react';
import {Button, Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
const Push_day_showcase = ({navigation}) => {
return(
<View style={styles.container1}>
<Text style={{color: 'white'}}>
This is push-day-showcase page!
</Text>
<TouchableOpacity style={styles.barButton} onPress={()=>navigation.navigate("Push day workout")}>
<Text>Start Session</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#202020',
},
barButton:{
alignItems: 'center',
padding:5,
paddingLeft: 15,
paddingRight: 15,
margin: 8,
marginBottom: 5,
marginTop: 20,
borderRadius: 10,
backgroundColor: 'red'
},
}
);
export default Push_day_showcase;
This is doable by using flexbox:
import { Text, View, StyleSheet, Button, Image, TouchableOpacity, ScrollView } from 'react-native';
import Constants from 'expo-constants';
// 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 function App() {
return (
<ScrollView contentContainerStyle={styles.container1}>
<View style={{flex: 1}}>
<Text style={{color: 'white', fontSize: 64}}>
This is push-day-showcase page!
This is push-day-showcase page!
This is push-day-showcase page!
</Text>
</View>
<TouchableOpacity style={styles.barButton}>
<Text>Start Session</Text>
</TouchableOpacity>
</ScrollView>
);
}
const styles = StyleSheet.create({
container1: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#202020',
padding: 32
},
barButton:{
alignItems: 'center',
padding:5,
paddingLeft: 15,
paddingRight: 15,
margin: 8,
marginBottom: 5,
marginTop: 20,
borderRadius: 10,
backgroundColor: 'red',
},
});````
Problem:
I have created a react native component with three touchable opacity components. It is showing like this.
This is how my code is looking.
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import LangaugeCard from './LanguageCard';
import styles from '_styles/homescreen';
class Localization extends Component {
render() {
return (
<View style={styles.localization_container}>
<TouchableOpacity>
<LangaugeCard language="Hindi" />
</TouchableOpacity>
<TouchableOpacity>
<LangaugeCard language="English" />
</TouchableOpacity>
<TouchableOpacity>
<LangaugeCard language="French" />
</TouchableOpacity>
</View>
);
}
}
export default Localization;
My LanguageCard looks like this.
/* eslint-disable prettier/prettier */
import React from 'react';
import {View, Text} from 'react-native';
import styles from '_styles/homescreen';
const LanguageCard = (props) => {
const {language, instruction} = props;
return (
<View style={styles.langauge_card}>
<View style={styles.langauge_view}>
<Text style={styles.language}>{language}</Text>
</View>
<View style={styles.instruction_view}>
<Text style={styles.instruction}>{instruction}</Text>
</View>
</View>
);
};
export default LanguageCard;
This is my styling file.
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
backgroundColor: '#eeeeee',
height: '100%',
justifyContent: 'center',
},
localization_container: {
flex: 1,
},
langauge_card: {
backgroundColor: '#ffffff',
height: '46%',
marginLeft: '5%',
marginRight: '5%',
borderRadius:35,
flexDirection:'row',
elevation: 1,
},
langauge_view:{
backgroundColor:'#007aff',
marginTop: '8%',
marginBottom: '8%',
marginLeft:'8%',
borderRadius: 15,
width:'30%',
justifyContent: 'center',
},
language:{
fontFamily:'IskoolaPota',
fontSize:24,
textAlign:'center',
color:'#ffffff',
justifyContent:'center',
},
instruction_view:{
marginTop: '8%',
marginBottom: '8%',
marginLeft:'5%',
justifyContent: 'center',
},
instruction:{
color:'#444444',
fontSize: 15,
},
});
export default styles;
What I want to do is to reduce the space between touchable components and put all three buttons center of the screen I tried a lot to find a way to do so but It was unable to do so. Can someone help me to achieve this one by modifying the code? Thank you
I don't think its a good idea to use percentages as height in this case. Right now, your TouchableOpacity is going off the screen because you have height: '46%', Since you have 3 of those, its height is 138% + padding and margins.
I prefer to use flex and use justifyContent for aligning horizontally and align-items for aligning vertically
So in your case,
langauge_card:{
flex: 1,
}
langauge_view:{
flex: 1,
alignItems: "center",
justifyContent: "center"
}
instruction_view:{
flex: 1,
alignItems: "center",
justifyContent: "center"
}
You can play around wth flex, margin, and "flex-start", "center", "flex-end" for justify content and alignItem.
Hope this helped a bit.
Put these styles in localization_container
{
flex: 1,
alignItems: 'center',
JustifyContent: 'center'
}
These styles will make sure items inside the child's view will be shown in the center of the screen then remove the hight of your containers (if you have any) one by one, Try to avoid usage of % as this can unpredictable.
I am new to react native and am struggling to round the corners to text elements, as you can see the corners are still sticking out of the rounded border, and the same happens when I wrap the text in a view element, I don't know how to fix this. Here is the code:
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Touchable, TouchableHighlight} from 'react-native';
import { render } from 'react-dom';
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this.myButtonPressed}
>
<Text style={styles.text}> Login </Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
color: "#FFFFFF",
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
}
});
What you can do is wrap the text inside view component and pass all neccessary styling to the view.
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this.myButtonPressed}
>
<View style={styles.btnContainer}>
<Text style={styles.text}> Login </Text>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
btnContainer: {
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
},
text: {
fontSize: 30,
color: "#FFFFFF",
}
});
You can use TouchableOpacity for better experience. You don't need to define border n all with TouchableOpacity.
Try this - Live Demo
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.myButtonPressed}
style={styles.hLight}
>
<Text style={styles.text}> Login </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
hLight: {
fontSize: 30,
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
},
text: {
fontSize:20,
color:'white'
}
});
Using TouchableHighlight - Live
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this.myButtonPressed}
style={styles.hLight}
>
<Text style={styles.text}> Login </Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
hLight: {
fontSize: 30,
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
},
text: {
fontSize:20,
color:'white'
}
});
Using react-native, I created a custom button as follows:
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);
But the text inside this button doesn't align vertically. Premise: I am new in react-native and I am almost sure I missing something of really stupid.
For the properties justifyContent and alignItems to work they need to be on an element with display: flex.
Whats making your text align to center is the property textAlign: 'center'
on style.text
Use display: 'flex' and flex: 1 on your style.textContainer
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
add css to your opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"
it will make your text in center
Add flex: 1 in your textContainer style :
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
How would a layout like this be done in react native? I understand that I can use justifyContent: space-between for the first row, but how would I make the second row fill all the available space, so that 488498 of the top row is aligned on the right side with the string at the bottom row?
The only way I could think of is by using a monospace font, but that's not an alternative in this case as I'm not allowed to change the font.
Thanks in advance.
You need two <View> tags, one that'll have the alignSelf: 'flex-start' style prop (so it has variable width) and one with justifyContent: 'space-between' style prop (so the text fills up the empty space).
Below is an example and here's an Expo Snack for you to fiddle with.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<View style={styles.container}>
<Text style={styles.paragraph}>
afzender:
</Text>
<Text style={styles.paragraphRight}>
488498
</Text>
</View>
<Text>Very long text omg! This will surely be long.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
alignSelf: 'flex-start',
alignContent: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
container: {
justifyContent: 'space-between',
flexDirection: 'row',
backgroundColor: 'red',
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'left',
},
paragraphRight: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'right',
}
});
You could wrap 488498 with a div and give it text-align:right OR float:right using CSS...