We Keep Coding

Unable to align text in React Native

I am new to React Native. I have created a login page with it. I want to know how I can align the Login text on the left side instead of showing it in the center.
My code:
Login.js
import React from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
const Login = () => {
return (
<View style={styles.container}>
<Text style={styles.head}>
Login
</Text>
<TextInput placeholder="Username" style={styles.input}/>
<TextInput placeholder="Password" style={styles.input}/>
<TouchableOpacity style={styles.button}>
<Text style={styles.textStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white'
},
head:{
alignItems:'flex-start',
fontWeight:'bold',
fontSize:30,
marginBottom:15
},
input:{
height:50,
borderRadius:5,
backgroundColor:'#ededed',
alignSelf:'stretch',
marginLeft:15,
marginRight:15,
marginBottom:8,
paddingLeft:15
},
button:{
backgroundColor:'#e57373',
alignSelf:'stretch',
borderRadius:5,
marginLeft:15,
marginRight:15,
alignItems:'center',
padding: 15,
},
textStyle:{
fontWeight:'bold',
color:'white'
}
});
export default Login;
Let me know what I am doing wrong in the code above.

alignItems is concerned with the children of the parent container, while alignSelf deals with the element itself.
head:{
alignSelf:'flex-start',
// ...other styles
}

I can't test it right now, but it should be something like this:
Add the alignSelf and textAlign attributes to your head-styles.
head: {
alignItems: 'flex-start',
alignSelf: 'stretch',
fontWeight: 'bold',
fontSize: 30,
marginBottom: 15,
textAlign: 'left'
},

TextInput disappears under keyboard in React Native

I am making a react native app and for some reason when I tap on the text input to type something it disappears under the keyboard. I want it to come to the top of the keyboard like the way Instagram messenger and other messenger apps do it. I tried using keyboardAvoidView and setting the behavior to padding and height but none of it worked.
import {
View,
Text,
StyleSheet,
SafeAreaView,
TextInput,
TouchableOpacity,
} from "react-native";
import CommunityPost from "../components/CommunityPost";
import { Context as CommunityContext } from "../context/CommunityContext";
const Key = ({ navigation }) => {
const { createCommunityPost, errorMessage } = useContext(CommunityContext);
const [body, setBody] = useState("");
return (
<View style={styles.container}>
<SafeAreaView />
<CommunityPost />
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline={true}
placeholder="Type..."
placeholderTextColor="#CACACA"
value={body}
onChangeText={setBody}
/>
<TouchableOpacity
style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
onPress={() => createCommunityPost({ body })}
>
<Text style={styles.sendText}>Send</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "flex-start",
backgroundColor: "#2B3654",
justifyContent: "flex-end",
},
inputContainer: {
justifyContent: "flex-end",
flexDirection: "row",
},
sendText: {
color: "white",
fontSize: 25,
},
input: {
fontSize: 25,
color: "white",
borderColor: "#2882D8",
borderWidth: 1,
borderRadius: 15,
width: "80%",
marginBottom: 30,
marginLeft: 10,
padding: 10,
},
});
export default Key;

You must KeyboardAvoidingView component provided by react native.
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={styles.container}
>
<SafeAreaView />
<CommunityPost />
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline={true}
placeholder="Type..."
placeholderTextColor="#CACACA"
value={body}
onChangeText={setBody}
/>
<TouchableOpacity
style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
onPress={() => createCommunityPost({ body })}
>
<Text style={styles.sendText}>Send</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>

For these situations we can use one of these methods:
1.wrapping Component with <ScrollView></ScrollView>
2.wrapping Component with <KeyboardAvoidingView></KeyboardAvoidingView>
Sometimes our wrong given styles can make these happens too such as : Having a fixed value for our styles, check your margins and use one of the given methods
I hope it helps

Try using keyboardVerticalOffset and test it with different values.
For more info check this out

For those who want to keep the code clean, just use the FlatList component and add a View component involving the component with the states: {flex: 1, height: Dimensions.get ("window"). Height}.
Below left a component ready for anyone who wants to use, just wrap your component in this way:
<FormLayout>
{... your component}
</FormLayout>
Here is the solver component:
import React from 'react'
import { View, StyleSheet, FlatList, Dimensions } from 'react-native'
import Background from './Background'
const FormLayout = ({ children }) => {
const renderContent = <View style={styles.container}>
{children}
</View>
return <FlatList
ListHeaderComponent={renderContent}
showsVerticalScrollIndicator={false}
/>
}
const styles = StyleSheet.create({
container: {
flex: 1,
height: Dimensions.get('window').height * 0.95
}
})
export default FormLayout

How to use default props with Redux props?

I was trying to make a "photo galley app" where each image is a "button" that toggle on the boolean property for Modal tag. The problem is that the images are rendered by a FlatList which pass props to component "GenerateImage.js", but at the same time, I need to pass the state and dispatch function as a parameter as well.
File who render the FlatList:
import React, { Component } from 'react'
import { FlatList, View, StyleSheet, TouchableOpacity, Text, AppRegistry } from 'react-native'
import { connect } from 'react-redux'
import GenerateImage from '../components/GenerateImage'
import commonStyles from '../commonStyles'
import Modal from '../components/Modal'
const Photos = ({ params }) => {
return (
<View style={{ flex: 1 }}>
<Modal isVisible={params.showFullImage} />
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Hoje</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Mês</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Ano</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Álbuns</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 30 }}>
<FlatList data={params.images} keyExtractor={item => `${item.id}`}
renderItem={({item}) => <GenerateImage {...item} />} numColumns={2} />
</View>
</View>
)
}
const styles = StyleSheet.create({
buttonsContainer: {
flex: 3,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1c2431',
},
touchContainer: {
marginHorizontal: 20,
backgroundColor: '#439ce8',
borderRadius: 30,
width: 65,
alignItems: 'center',
justifyContent: 'center',
padding: 5
},
button: {
color: 'white',
fontFamily: commonStyles.Font,
fontSize: 14
}
})
export default connect(state => ({ params: state[0] }))(Photos)
GenerateImage.js:
import React from 'react'
import { View,
StyleSheet,
Image,
PixelRatio,
Dimensions,
TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
const GenerateImage = (props, {param, dispatch}) => {
function toggleModal(param) {
return {
type: 'TOGGLE_MODAL_ON',
}
}
return (
<View style={styles.container}>
<View style={styles.imgContainer}>
<TouchableOpacity activeOpacity={0.7} onPress={() => dispatch(toggleModal(param))}>
<Image source={props.image} style={styles.imgContainer} />
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginVertical: 5,
marginHorizontal: 4
},
imgContainer: {
height: Dimensions.get('window').height * 0.25,
width: Dimensions.get('window').width * 0.48,
//borderRadius: 8,
//flex: 1,
//orderWidth: 1,
},
image: {
resizeMode: 'contain',
aspectRatio: PixelRatio.get()
},
})
export default connect(state => ({ param: state[0].showFullImage }))(GenerateImage)
So, how can I pass both data?

How to arrange render flatlist?

I have a problem when I separate some flat-list to different components. How can I arrange render flat-list like the sample form (Picture " Sample UI")? I try and it doesn't work. It rendered flat list A then flat list B. Please help me solve it. Have another way can solve it.
Thanks.
My code is here.
Header component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
//Component render flat-list. Show name of artist and albums.
export default class Header extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
<Image
source = {{uri: item.item.thumbnail_image}} style ={styles.imageThumbnail}>
</Image>
<View style= {{
flex: 1,
flexDirection: 'column'
}}>
//show title
<Text style = {styles.textTitle}>{item.item.title}</Text>
//show name of artist
<Text style = {styles.textArtist}>{item.item.artist}</Text>
</View>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
//style
const styles = StyleSheet.create({
container: {
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#d6d7da',
borderRadius: 4,
borderWidth: 0.5,
fontSize: 1,
height: 50,
marginLeft: 10,
marginRight:10
},
text: {
fontSize: 20,
},
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 20,
height: 60
},
imageThumbnail: {
width: 50,
height: 50,
margin: 5
},
image: {
width: 320,
height: 240,
margin: 5
},
})
Image Component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
// Component show image of albums
export default class ImageCom extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
//Image of albums
<Image
source = {{uri: item.item.image}} style ={styles.image}>
</Image>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
//style sheet
const styles = StyleSheet.create({
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 5,
height: 250
},
image: {
width: 320,
height: 240,
margin: 5
},
})
App.js
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList} from 'react-native'
import Tabbar from './src/components/Tabbar'
import Header from './src/components/Header'
import ImageCom from './src/components/ImageCom'
//Combine components and show it on UI
export default class App extends Component{
render() {
return(
<View style = {styles.container}>
<Tabbar /> //Hello
<Header /> //Artist and albums
<ImageCom /> //Image of albums
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
},
});

hi as #angelos_lex said you dont require two flatlists i tink so you can display that image component image in header component only
export default class Header extends Component{
renderItem(item) {
return(
<View style = {{flexDirection:'colomn'}}> **//give require styles**
<View style = {styles.flatlist}>
<Image
source = {{uri: item.item.thumbnail_image}} style = {styles.imageThumbnail}>
</Image>
<View style= {{ flex: 1,flexDirection: 'column' }}>
//show title
<Text style = {styles.textTitle}>{item.item.title}</Text>
//show name of artist
<Text style = {styles.textArtist}>{item.item.artist}</Text>
</View>
</View>
<Image source = {{uri: item.item.image}} style ={styles.image}/> **// i am not sure what uri should be given**
</View>
);
**// remaining code**

Why you need two separate flatlists for this?
Since you want it with order: header_No1->image_No1->footer_No1 then header_No2->image_No2->footer_No2, then one Flatlist is enough, which will render "header" "image" and "footer" components inside.

How to make this grid with logo header at the top?

I am a newbie to react native, I want to make this layout possible I have following code but it puts the logo inside grid
What I am looking for is this
import React, { Component } from 'react';
import GridView from 'react-native-super-grid';
export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'Details',
};
render() {
const { navigate } = this.props.navigation;
const items = [
{ name: require('./images/shopping-cart.png'),code: '#2ecc71' }, { name: require('./images/home.png'), code: '#2ecc71' },
{ name: require('./images/money-bag.png'), code: '#2ecc71' }, { name: require('./images/alert.png'), code: '#2ecc71' }
];
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<View style={styles.mainLayout}>
<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={styles.itemContainer}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</View>
</ImageBackground>
);
}
}
const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
},
logoFit: {
width: imageHeight,
height: imageWidth
},
mainLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
});

Get rid of that grid component. You don't need it for such a simple thing. It's complicating things, and as it's not a regular/common component we don't know how it's affecting things.
This looks quite simple:
<View>
<View style={{}}>
<Image />
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 1, col 1</Text>
</View>
<View>
<Text>row 1, col2Text>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 2, col 1</Text>
</View>
<View>
<Text>row 2, col2Text>
</View>
</View>
<View style={{}}>
<Button title="Login" />
</View>
</View>
Here's another similar question - How to create 3x3 grid menu in react native without 3rd party lib?

Inside navigationOptions You should remove the title property and define a header property and put your Image there. Like this
static navigationOptions = {
header:(<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>)
};
Or... YOu can just make the header null as
static navigationOptions = {
header:null
};
and your current code would work as you want it to be.