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
Related
I am following the below tutorial and trying to implement the react native bottom sheet in my Home Screen.
I used all his codes but still I am not able to open the bottom sheet when I click the filters button
Providing the video tutorial, GitHub link and my code below below
Its throwing an error at this line —> bs = React.createRef();
Can you let me know how to fix it
https://www.youtube.com/watch?v=mjJzaiGkaQA
https://github.com/itzpradip/Food-Finder-React-Native-App/blob/master/screens/EditProfileScreen.js
import 'react-native-gesture-handler';
import React, {useRef, useState} from 'react';
//import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import MapView from 'react-native-map-clustering';
import Autocomplete from 'react-native-autocomplete-input';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
//import {Button} from 'react-native';
import {
Image,
LogBox,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {Button, Menu, Provider} from 'react-native-paper';
import DropDownPicker from 'react-native-dropdown-picker';
//import { Input } from 'react-native-elements';
//import Geolocation from 'react-native-geolocation-service';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
LogBox.ignoreAllLogs();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
const data = ['dropdown1', 'drop down 2', 'a drop down'];
const AuthStack = () => {
return (
<Drawer.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="HomeScreen2" component={HomeScreen2} />
{/* <Stack.Screen name="HomeScreen7" component={HomeScreen7}/>
<Stack.Screen name="HomeScreen8" component={HomeScreen8}/> */}
</Drawer.Navigator>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen
name="Main"
component={Main}
options={{headerShown: false}}
/>
<Stack.Screen name="AuthStack">{() => <AuthStack />}</Stack.Screen>
{/* <AuthStack /> */}
{/* <Stack.Screen name="OnboardingScreen" component={OnboardingScreen} /> */}
</Stack.Navigator>
</NavigationContainer>
);
};
const Main = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<View style={{}}>
<Text style={{fontSize: 30, fontWeight: 'bold', color: '#20315f'}}>
GAMEON
</Text>
</View>
<TouchableOpacity
onPress={() => navigation.navigate('AuthStack')}
style={{
backgroundColor: '#AD40AF',
padding: 20,
flexDirection: 'row',
justifyContent: 'space-between',
color: '#fff',
width: '90%',
marginBottom: 50,
}}>
<Text
style={{
color: '#fff',
fontWeight: 'bold',
}}>
Let's Begin
</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
const Home = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<Text style={{fontSize: 30, fontWeight: 'bold', color: '#20315f'}}>
Home
</Text>
</View>
);
};
const HomeScreen2 = () => {
return (
<View style={styles.container}>
<MapView
// provider={PROVIDER_GOOGLE}
// remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}></MapView>
{/* <View style={styles.searchBox}>
<TextInput
placeholder="Search here"
placeholderTextColor="#000"
autoCapitalize="none"
style={{flex: 1, padding: 0}}
/>
</View> */}
<View style={styles.searchBox}>
<Autocomplete
//onChangeText={}
/>
</View>
</View>
);
};
const HomeScreen = ({navigation}) => {
bs = React.createRef();
fall = new Animated.Value(1);
// renderInner = () => (
// <View style={styles.panel}>
// <View style={{alignItems: 'center'}}>
// <Text style={styles.panelTitle}>Upload Photo</Text>
// <Text style={styles.panelSubtitle}>Choose Your Profile Picture</Text>
// </View>
// <TouchableOpacity style={styles.panelButton} onPress={takePhotoFromCamera}>
// <Text style={styles.panelButtonTitle}>Take Photo</Text>
// </TouchableOpacity>
// <TouchableOpacity style={styles.panelButton} onPress={choosePhotoFromLibrary}>
// <Text style={styles.panelButtonTitle}>Choose From Library</Text>
// </TouchableOpacity>
// <TouchableOpacity
// style={styles.panelButton}
// onPress={() => this.bs.current.snapTo(1)}>
// <Text style={styles.panelButtonTitle}>Cancel</Text>
// </TouchableOpacity>
// </View>
// );
// renderHeader = () => (
// <View style={styles.header}>
// <View style={styles.panelHeader}>
// <View style={styles.panelHandle} />
// </View>
// </View>
// );
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: '#fff',
}}>
<View
style={{
flex: 0.4,
zIndex: 100,
elevation: 1000,
}}>
<ScrollView
showsHorizontalScrollIndicator={false}
horizontal={true}
contentContainerStyle={{
alignItems: 'center',
flexDirection: 'row',
}}>
<View
style={{
margin: 10,
flex: 1,
zIndex: 100,
}}>
<TouchableOpacity onPress={() => this.bs.current.snapTo(0)}>
<Text>filters</Text>
</TouchableOpacity>
{/* <BottomSheet
ref={this.bs}
snapPoints={[330, 0]}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
initialSnap={1}
callbackNode={this.fall}
enabledGestureInteraction={true}
/> */}
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
const INITIAL_REGION = {
latitude: 52.5,
longitude: 19.2,
latitudeDelta: 8.5,
longitudeDelta: 8.5,
};
const styles = StyleSheet.create({
container: {
// ...StyleSheet.absoluteFillObject,
// justifyContent: 'flex-end',
// alignItems: 'center',
flex: 1,
},
searchBox: {
position: 'absolute',
left: 150,
marginTop: Platform.OS === 'ios' ? 8 : 4,
// flexDirection: 'row',
backgroundColor: '#fff',
width: '60%',
alignSelf: 'center',
borderRadius: 5,
//padding: 5,
//shadowColor: '#ccc',
height: '4%',
// marginLeft: 249,
shadowOffset: {width: 0, height: 3},
//shadowOpacity: 0.5,
// shadowRadius: 5,
//elevation: 10,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;
Your mistake is here.
You can't use "this" with functional components. If you use bs.current.snapTo(0), it will open the sheet.
import {Swipeable} from 'react-native-gesture-handler' not working in android (expo Cli). I've tried everything, ejected expo cli, edited MainActivity.java file but nothing works. There are a couple of threads but none of them works. Please help as I'm stuck with this issue for a long time. Thanks
Here is my code.
import React from 'react';
import { View, Text, StyleSheet, Keyboard,SafeAreaView, TouchableOpacity, FlatList, KeyboardAvoidingView, TextInput, Animated } from 'react-native';
import { AntDesign, Ionicons } from "#expo/vector-icons";
import { SwipeListView } from 'react-native-swipe-list-view';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { Colors } from 'react-native/Libraries/NewAppScreen';
export default class TodoModal extends React.Component {
state = {
newTodo: ""
};
toggleTodoCompleted = index => {
let list = this.props.list;
list.todos[index].completed = !list.todos[index].completed;
this.props.updateList(list);
};
addTodo = () => {
let list = this.props.list;
list.todos.push({ title: this.state.newTodo, completed: false });
this.props.updateList(list);
this.setState({ newTodo: ""});
Keyboard.dismiss();
};
renderTodo = (todo, index) => {
return (
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
);
};
rightActions = (dragX, index) => {
return (
<TouchableOpacity>
<Animated.View style={styles.deleteButton}>
<Animated.Text>Delete</Animated.Text>
</Animated.View>
</TouchableOpacity>
);
};
render() {
const list = this.props.list;
const taskCount = list.todos.length;
const completedCount = list.todos.filter(todo => todo.completed).length;
return (
<KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null}>
<SafeAreaView style={styles.container}>
<TouchableOpacity
style={{ position: "absolute", top: 64, right: 32, zIndex: 10}}
onPress={this.props.closeModal}
>
<AntDesign name="close" size={24} color="#2D3436" />
</TouchableOpacity>
<View style={[styles.section, styles.header, { borderBottomColor: list.color }]}>
<View>
<Text style={styles.title}>{list.name}</Text>
<Text style={styles.taskCount}>
{completedCount} of {taskCount} tasks
</Text>
</View>
</View>
<View style={[styles.section, { flex: 2 }]}>
<FlatList
data={list.todos}
renderItem={({ item, index }) => this.renderTodo(item, index)}
keyExtractor={(_, index) => index.toString()}
contentContainerStyle={{ paddingHorizontal: 32, paddingVertical: 64 }}
showsVerticalScrollIndicator={false}
/>
</View>
<View style={[styles.section, styles.footer]} >
<TextInput
style={[styles.input, {borderColor: list.color}]}
onChangeText={text => this.setState({ newTodo: text })}
value={this.state.newTodo}
/>
<TouchableOpacity style={[styles.addTodo, {backgroundColor: list.color}]} onPress={() => this.addTodo()}>
<AntDesign name="plus" size={16} color="#FFFFFF" />
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
section: {
flex: 1,
alignSelf: "stretch"
},
header: {
justifyContent: 'flex-end',
marginLeft: 64,
borderBottomWidth: 3
},
title: {
fontSize: 30,
fontWeight: "800",
color: "#2D3436"
},
taskCount: {
marginTop: 4,
marginBottom: 16,
color: "#A4A4A4",
fontWeight: "600"
},
footer: {
paddingHorizontal: 32,
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 1,
height: 48,
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 6,
marginRight: 8,
paddingHorizontal: 8
},
addTodo: {
borderRadius: 4,
padding: 16,
alignItems: "center",
justifyContent: "center"
},
todoContainer: {
paddingVertical: 16,
flexDirection: "row",
alignItems: "center"
},
todo: {
color: "#2D3436",
fontWeight: "700",
fontSize: 16
},
deleteButton: {
flex: 1,
backgroundColor: Colors.red,
justifyContent: "center",
alignItems: "center",
width: 80
}
});
You have to wrap the swipeable in a gestureHandlerRootView
import { GestureHandlerRootView, Swipeable } from "react-native-gesture-handler";
<GestureHandlerRootView>
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
</Swipeable>
I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this?
(https://i.stack.imgur.com/1c0M6.jpg) have tried KeyboardAvoidingView and react-native-keyboard-aware-scroll-view but the problem still persist
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-
navigation';
import { KeyboardAwareView } from 'react-native-keyboard-aware-
view';
import { AsyncStorage } from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
<View style={styles.container}>
<ScrollView style={{flex: 1}}>
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={styles.formContainer}>
<ScrollView style={{flex:1}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</ImageBackground>
</ScrollView>
</View>
</KeyboardAwareView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
height: "30%"
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
I checked and modify your code in react native ios. The following code might be helpful for you.
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Dimensions,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
let {height, width} = Dimensions.get('window');
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView behavior={"padding"} enabled style= .
{{flexGrow:1,height:'100%'}}>
<ScrollView bounces={false} >
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: height}} source={require('./bg.jpg')}>
<View style={{flex:1}}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={{flex:2}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</View>
</ImageBackground>
</ScrollView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
// height:'30%'
flex:1
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
If you run the above code in android then change behavior={"height"}
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 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>