I am using react-native .My input field is not display on full width why ? But when I check on IOS it works correctly display input field on full width .
here is my code
https://rnplay.org/apps/aHRkHA
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}> Login</Text>
<TextInput
style={styles.loginInput}
placeholder="Type here to translate!"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#EF501E',
flex: 1,
alignItems: 'center'
},
logo: {
width: 50,
height: 50
},
heading: {
fontSize: 30,
marginTop: 20
},
loginInput: {
height: 50,
borderWidth: 1,
borderColor: '#33090C',
flexDirection: 'row',
justifyContent: 'center',
}
});
registerComponent(App);
Try overriding the alignItems: 'center' of the parent with alignSelf: 'stretch' for <TextInput>:
<View style={styles.container}>
...
<View style={{alignSelf: 'stretch'}}>
<TextInput
style={styles.loginInput}
placeholder="Type here to translate!"
/>
</View>
</View>
Related
I have a Register Component that has PhoneInput Component from the external library https://github.com/thegamenicorus/react-native-phone-input The problem is I want to execute some code as soon as TextField inside the PhoneInput is Focused.
While checking the documentation of the library. I saw a property called the textComponent. Can that be used for onFocus of the text field present in PhoneInput Component
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import PhoneInput from 'react-native-phone-input'
export default class Register extends React.Component {
constructor(props){
super(props);
this.state = {"phone": ""};
this.countriesList = [
{
"name": "India (भारत)",
"iso2": "in",
"dialCode": "91",
"priority": 0,
"areaCodes": null
}];
this.phoneTextField=null;
}
componentDidMount() {
console.log('GrandChild did mount.');
// console.log(this.phoneTextField);
}
render() {
console.log(this.phoneTextField);
console.log("Register Screen");
return (
<View style={{borderColor:'red', borderWidth:0, height:'100%' }}>
<View style={{borderColor:'green', borderWidth:0, height:'20%' }}>
<View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'50%', height:'100%'}}>
<Image
style={{width: '100%', height: '100%' }}
source={ require("../assets/logo.png") }
/>
</View>
</View>
<View style={{borderColor:'green', borderWidth:0, height:'40%', marginLeft:'1%', marginTop:'5%' }}>
<View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'100%', height:'100%'}}>
<Image
style={{width: '100%', height: '100%' }}
source={ require("../assets/welcomescreen.jpg") }
/>
</View>
</View>
<View style={{ margin : '7%'}}>
<Text style={{ fontSize:20, fontWeight:'bold' }}>Save your time</Text>
<Text style={{ fontSize:14, color:'grey', paddingTop:'5%' }}>Please Enter your mobile number to proceed</Text>
<PhoneInput ref={ref => {
this.phoneTextField = ref;
}}
style={{paddingTop:'10%'}}
countriesList={this.countriesList}
initialCountry='in'
onChangePhoneNumber={(phone)=>{
console.log(phone);
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
My App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from "./screens/Register";
export default class App extends React.Component {
render() {
console.log("hello bros");
return (
<Register/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I'm not familiar with that library, however, textComponent accepts a function so you should be able to do this
textComponent={
()=>{
return(<TextInput
....some props here
onFocus={()=>console.log('focused')})
}}
enter image description here
Current Behaviour
The KeyBoardAvoidingView hides the Login button.
Its the same on Android and on iPhone.
On an Android Tablet It hides the Login button but since the screen is large you can see the button halfway from the top.
Expected Behaviour
I want the Login button at the bottom to move into the app frame when user wants to input his login details.
App.js
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import Login from './screens/Login';
class App extends React.Component {
render() {
return (
<View
style={styles.container} >
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<Text style={styles.paragraph}>Tido</Text>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.boxContainer, styles.boxThree]}>
<Text style={styles.paragraph}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
boxContainer: {
flex: 1, // 1:3
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row'
},
boxOne: {
flex: 6, // 5:6
justifyContent: 'space-around',
alignItems: 'center',
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: 'powderblue',
flexDirection: 'row',
width: '50%',
height: '100%'
},
boxThree: {
flex: 1, // 1:6
flexDirection: 'row',
backgroundColor: 'skyblue',
width: '50%',
height: '100%'
},
paragraph: {
margin: 24,
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
const appScreens = StackNavigator({
Index: { screen: App },
Login: { screen: Login }
})
AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;
Login.js
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';
export default class Login extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<TextInput
style={styles.inputBox}
placeholder="username,email or phone"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
<TextInput
style={styles.inputBox}
secureTextEntry={true}
placeholder="password"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity
style={[styles.boxContainer, styles.boxTwo]}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
boxContainer: {
flex: 1, // 1:3
justifyContent: 'center',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row',
},
boxOne: {
flex: 5, // 5:6
backgroundColor: 'white',
padding: 20
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: '#252525',
flexDirection: 'row',
width: '100%',
height: '100%',
alignItems: 'center'
},
inputBox: {
height: 40,
backgroundColor: '#B6B6B630',
marginBottom: 10,
paddingHorizontal: 10,
},
paragraph: {
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
},
});
The problem is that KeyboardAvoidingView cannot correctly apply padding if it's children doesn't have plain size set. In this particular case you need to figure out the screen dimenson and apply screen height (minus navigation bar height) to your root View style:
import { Dimensions } from 'react-native';
const { screenHeight: height } = Dimensions.get('window');
const styles = StyleSheet.create({
...
containerContent: {
height: screenHeight - navBarHeight,
justifyContent: 'center',
}
...
},
And apply it in your render method:
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.containerContent}>
...
</View>
</KeyboardAvoidingView>
);
}
I am still seeing that on keyboard open the toolbar is being pushed up out of visible area. This is the code :
<KeyboardAvoidingView style={styles.containerContent}>
<View style={styles.containerContent}>
<GiftedChat
messages={}
onSend={this.onSend}
renderAvatar={null}
user={{
_id: 1,
}}
imageStyle={{}}
/>
</View>
</KeyboardAvoidingView>
const styles = StyleSheet.create({
containerContent: {
height: Dimensions.get('window').height - kHeaderHeight,
justifyContent: 'center',
flex: 1,
},
});
I'm trying to make two nested swipers on Android with React Native, using react-native-swiper. Each swiper works correctly when is separate, but when I add one to the other, the inner nested swiper doesn't show any content. It's a little bit weird, it recognized its children, I can swipe but Views are not rendered. Here is my simple demonstration example:
import React from 'react'
import {
Text,
View
} from 'react-native'
import Swiper from 'react-native-swiper'
const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
var styles = {
wrapper: {
backgroundColor: 'transparent'
},
innerSwiper: {
width: window.width,
height: window.height / 3,
marginTop: 60,
backgroundColor: '#92BBD9'
},
slide1: {
flex: 1,
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
}
export default () =>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<View style={styles.innerSwiper}>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
</View>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
I'm trying to a implement a logic to display some data fetched from a simple REST API. So i'm grabbing the JSON object in the RanjoorExplore class and the data is sent into the data to the ExploreCard in the other class. So the this.props.data must be referencing the passed variable. By mapping that variable, I'm displaying the title attribute of the response object in a simple Text Component.
I'm facing this error:
undefined is not a function(evaluating this.props.data.map).
RanjoorExplore:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
Alert
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ExploreCard from '../../elements/cards/ExploreCard';
import ExploreHeader from '../../elements/headers/ExploreHeader';
class RanjoorExplore extends Component {
constructor(){
super();
this.state = {
rawData: []
}
}
static navigationOptions = {
header: null,
title: 'Explore',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name="bandcamp"
size={24}
color={focused ? '#4ab367' : 'white'}
/>
),
headerStyle: { backgroundColor: '#202026' },
headerTitleStyle: {
color: 'white'
}
};
fetchGanjoorData() {
return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((responseJson) => {
this.setState({rawData: responseJson})
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
this.fetchGanjoorData();
}
render() {
return (
<View style={styles.ExploreContainer}>
<ExploreHeader />
<ScrollView>
<ExploreCard data={this.state.rawData} />
</ScrollView>
</View>
);
}
}
var styles = StyleSheet.create({
ExploreContainer: {
backgroundColor: '#303036',
height: '100%',
width: '100%'
},
})
export default RanjoorExplore
ExploreCard:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Alert
} from 'react-native';
import { Card, ListItem, Button, Icon, Avatar } from 'react-native-elements';
export default class ExploreCard extends Component {
render() {
/* Mapped data will be processed right here */
let mappedData = this.props.data.map(function (data1) {
return (
<View>
{data1.title}
</View>
)
})
return (
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}></View>
<Card
containerStyle={{
width: '85%', height: 250, backgroundColor: '#202026', shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black', borderWidth: 0, borderRadius: 8, flexDirection: 'row'
}}
wrapperStyle={{ alignSelf: 'flex-end' }} >
<View style={{ flex: 2, alignSelf: 'flex-end' }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
<Text style={{ fontFamily: 'IRANSans', marginRight: 5, marginTop: 12, color: '#505056' }}>حافظ</Text>
<Avatar
medium
rounded
source={require('../../img/avatars/ferdowsi.jpg')}
containerStyle={{
alignSelf: 'flex-end', marginRight: 15,
shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black'
}}
/>
</View>
<View>
<Text style={{ alignSelf: 'flex-end', fontFamily: 'IRANSans', color: 'white', marginTop: '10%', marginRight: '5%' }}>
{mappedData}
</Text>
<Text style={{ alignSelf: 'flex-start', fontFamily: 'IRANSans', color: 'white' }}>
تا دمی برآساییم زین حجاب ظلمانی
</Text>
</View>
</View>
<View style={{ alignSelf: 'flex-end', backgroundColor: 'transparent', flexDirection: 'row' }}>
<Icon
name='favorite' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<Icon
name='grade' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<View>
<Button
textStyle={{ fontSize: 15 }}
iconRight
backgroundColor='#4ab367'
fontFamily='IRANSans_UltraLight'
buttonStyle={{
height: 15, width: 110,
borderRadius: 8
}}
title='ادامه مطلب'
/>
</View>
</View>
</Card>
<View style={{ flex: 1 }}></View>
</View>
);
}
}
Can someone please help me solve this issue?
Thanks in advance.
https://jsonplaceholder.typicode.com/posts/1 returns an object, not an array. Therefore, map is not a valid operation
Perhaps you meant to use https://jsonplaceholder.typicode.com/posts/? That returns an array
I watched a tutorial about React Native on YouTube.
I have built a simple stopper app. (Android) The problem is, in the release build, one of the letters is missing. I tried to build another simple app with just having "Hello" and in the release build in my phone instead of showing "Hello" I get "Hell".
Pictures:
Development build using Nexus 6 (AVD):
Release build with LG G4 (physical):
I don't know why this is happening. I appreciate any advice and help.
Edit: index.android.js:
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight
} from 'react-native'
class flexbox extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.header]}>
<View style={[styles.timeWrapper]}>
<Text style={styles.timer}>00:00.00</Text>
</View>
<View style={[styles.buttonWrapper]}>
<TouchableHighlight onPress={() => console.log('Start')} underlayColor="#2ecc71" style={[styles.button, styles.startButton]}>
<Text>Start</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => console.log('Lap')} underlayColor="#1abc9c" style={[styles.button, styles.lapButton]}>
<Text>Lap</Text>
</TouchableHighlight>
</View>
</View>
<View style={[styles.footer]}>
<Text>Laps</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
flex: 1
},
footer: {
flex: 1
},
timeWrapper: {
flex: 5,
justifyContent: 'center',
alignItems: 'center'
},
buttonWrapper: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
timer: {
fontSize: 60,
color: 'black'
},
button: {
borderWidth: 2,
height: 100,
width: 100,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
},
startButton: {
borderColor: '#2ecc71'
},
lapButton: {
borderColor: '#1abc9c'
}
})
AppRegistry.registerComponent('flexbox', () => flexbox)
You haven't supplied any code, but I'm guessing you have created a view with exact width and height, and in order to have the text in the middle, you added padding.
Here's an example of a working circle with text:
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.circle}>
<Text>Hello</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
circle: {
width: 50,
height: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'red',
borderWidth: 3,
}
});
Or see example in sketch