How to use default props with Redux props? - javascript

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?

Related

Warning: Can't perform a React state update on an unmounted component. Cancel all subscriptions and async using componentWillUnmount and useEffect

I am new to react and react native technology and I am stuck into a warning which I am not able to solve.
Two warnings I get:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it
indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method in PhoneInput (at Login.js:40)
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it
indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function in CountryPicker.
Here is my Login.js
import React, {useEffect, useState, useRef } from "react";
import {
View, Text,TouchableOpacity,
StyleSheet, Image, SafeAreaView,
TextInput,
StatusBar, ScrollView
} from 'react-native';
import { Card } from "react-native-shadow-cards";
import PhoneInput from 'react-native-phone-number-input';
import Styling from "../components/Styling";
const Login = (props) => {
const phoneInput = useRef(PhoneInput > (null));
const [phoneNumber,setphoneNumber]=useState(null);
return (
<View style={styles.container}>
<StatusBar backgroundColor='#1e3d59' barStyle="light-content" />
<ScrollView>
<View style={styles.header}>
<Image source={require('../assets/images/login.png')}
style={{ height: 150, width: 150, }}></Image>
</View>
<View
style={[styles.footer]}>
<Text style={Styling.text_footer}>Mobile Number</Text>
<View style={{marginTop:10,
alignContent:'center',
alignItems:'center',
paddingLeft:15,
borderWidth:1,
borderColor:'#d7dade',
borderRadius:20,
flexDirection:'row',
height:72,}}>
<SafeAreaView >
<PhoneInput
containerStyle={{
backgroundColor: '#fff',
borderColor:'black',
alignContent:'center',
height:70,
}}
flagButtonStyle={{
width:'15%'
}}
textContainerStyle={{
backgroundColor: '#fff',
}}
ref={phoneInput}
defaultValue={phoneNumber}
defaultCode="IN"
layout="first"
keyboardType='numeric'
onChangeText={setphoneNumber}
></PhoneInput>
</SafeAreaView>
</View>
<TouchableOpacity on onPress={() => props.onSubmit('+91'+phoneNumber)}>
<Card style={[containerStyle={
height:50,
elevation:0,
borderRadius:10,
backgroundColor: '#ff6e40',
width:"100%",
alignItems:'center',
alignContent:'center',
justifyContent:'center'
},{marginTop:30}]}>
<View >
<Text style={[Styling.textSign, {color:'#fff'}]}>Request OTP</Text>
</View>
</Card>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"column",
backgroundColor: '#1e3d59',
width: '100%',
},
header: {
alignItems: 'center',
height:"50%",
justifyContent:"center"
},
footer: {
backgroundColor: "white",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom:600
},
});
Here is my App.js
import React, { useState } from 'react';
import auth from '#react-native-firebase/auth';
import VerifyCode from './src/screens/VerifyCode';
import AuthStack from './src/navigation/AuthStack';
import Login from './src/auth/Login';
import { NavigationContainer } from '#react-navigation/native';
const App = () => {
const [confirm, setConfirm] = useState(null);
const [authenticated, setAuthenticated] = useState(false);
const signIn = async (phoneNumber)=> {
try {
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
setConfirm(confirmation);
} catch (error) {
alert(error);
}
}
const confirmVerificationCode= async (code) =>{
try {
await confirm.confirm(code);
setConfirm(null);
} catch (error) {
alert('Invalid code');
}
}
auth().onAuthStateChanged((user) => {
if(user) {
setAuthenticated(true);
} else {
setAuthenticated(false);
}
})
return(
<NavigationContainer>
{ authenticated? (
<AuthStack/>
)
:
confirm? (
<VerifyCode onSubmit={confirmVerificationCode}/>
)
:
<Login onSubmit={signIn}/>
}
</NavigationContainer>
);
}
export default App;
Here is my VerifyCode.js
import React, { useState} from "react";
import {
View, Text,Platform, TouchableOpacity,
StyleSheet, Image,
TextInput,
StatusBar, ScrollView
} from 'react-native';
import { Card } from "react-native-shadow-cards";
import Styling from "../components/Styling";
const Login = (props) => {
const [code, setCode] = useState('');
return (
<View style={styles.container}>
<StatusBar backgroundColor='#1e3d59' barStyle="light-content" />
<ScrollView>
<View style={styles.header}>
<Image source={require('../assets/images/login.png')}
style={{ height: 150, width: 150, }}></Image>
</View>
<View
style={[styles.footer]}>
<View style={{marginTop:10,
alignContent:'center',
alignItems:'center',
alignSelf:'center',
justifyContent:"center",
borderWidth:1,
borderColor:'#d7dade',
borderRadius:20,
height:60,
width:"40%"
}}>
<TextInput
placeholder="Enter OTP"
autoFocus
value={code}
onChangeText={setCode}
keyboardType="numeric"
style={{fontSize:20,}}
></TextInput>
</View>
<View style={{width:"100%", alignSelf:"center"}}>
<TouchableOpacity on onPress={() => props.onSubmit(code)}>
<Card style={[containerStyle={
height:50,
elevation:0,
borderRadius:10,
backgroundColor: '#ff6e40',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
},{marginTop:20}]}>
<View >
<Text style={[Styling.textSign, {color:'#fff'}]}>Confirm</Text>
</View>
</Card>
</TouchableOpacity>
</View></View>
</ScrollView>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"column",
backgroundColor: '#1e3d59',
width: '100%',
},
header: {
alignItems: 'center',
justifyContent:"center",
height:"50%"
},
footer: {
backgroundColor: "white",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom:600
},
});

I cant change the value with setState in React Native

I'm learning react native and I've been trying to solve this issue for last 3 days.
I'm using EXPO, The buttons does not change the value in const [isStarted, setIsStarted] = useState(false)
The buttons titles are: "pause" and "start"
Here is my code:
import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';
export const Timer = ({ focusSubject }) => {
const [isStarted, setIsStarted] = useState(false);
return (
<View style={styles.container}>
<View style={styles.countdown}>
<Countdown isPaused={!isStarted}/>
</View>
<View styles={{ paddingTop: spacing.xxl }}>
<Text style={styles.title}> Focusing on: </Text>
<Text style={styles.task}> {focusSubject} </Text>
</View>
<View style= {styles.buttonWrapper}>
{isStarted ? (
**<RoundedButton title="pause" onPress={() => setIsStarted(false)} />**
) : (
**<RoundedButton title="start" onPress={() => setIsStarted(true)} />**
)}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
color: colors.white,
textAlign: 'center',
},
task: {
color: colors.white,
textAlign: 'center',
fontWeight: 'bold',
},
countdown: {
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
},
buttonWrapper: {
alignItems: 'center',
flex: 0.3,
padding: 15,
justifyContent: 'center',
},
});
You need to pass a prop name to RoundedButton component and inside of that you need to call onPress
for ex:
import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';
export const Timer = ({ focusSubject }) => {
const [isStarted, setIsStarted] = useState(false);
const onButtonPress = () => {
setIsStarted(!isStarted)
}
return (
<View style={styles.container}>
<View style={styles.countdown}>
<Countdown isPaused={!isStarted}/>
</View>
<View styles={{ paddingTop: spacing.xxl }}>
<Text style={styles.title}> Focusing on: </Text>
<Text style={styles.task}> {focusSubject} </Text>
</View>
<View style= {styles.buttonWrapper}>
<RoundedButton title={isStarted ? "pause" : "start"} onButtonHandler={onButtonPress} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
color: colors.white,
textAlign: 'center',
},
task: {
color: colors.white,
textAlign: 'center',
fontWeight: 'bold',
},
countdown: {
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
},
buttonWrapper: {
alignItems: 'center',
flex: 0.3,
padding: 15,
justifyContent: 'center',
},
});
Here I added a button handler as a prop into RoundedButton, now inside RoundedButton call onPress={onButtonHandler} in the touchable event.
If you are still facing trouble please share update RoundedButton component code

How to Create Top Navigation Tab Under Another Component in React Native?

I'm using react-navigation version 5, currently, I have a screen with Text and Button inside a View which placed at the top of the SafeAreaView, and I need to add TopTabNavigator just below the View.
Here's the code:
TimelineComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import {ScrollView, Text} from 'react-native';
class TimelineComponent extends React.PureComponent {
render() {
return (
<ScrollView>
<Text>Timeline</Text>
</ScrollView>
);
}
}
export default TimelineComponent;
TrendingComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import {ScrollView, Text} from 'react-native';
class TrendingComponent extends React.PureComponent {
render() {
return (
<ScrollView>
<Text>Trending</Text>
</ScrollView>
);
}
}
export default TrendingComponent;
TopNav.js
import React from 'react';
import {createMaterialTopTabNavigator} from '#react-navigation/material-top-tabs';
import TimelineComponent from '../TimelineComponent';
import TrendingComponent from '../TrendingComponent';
const Tab = createMaterialTopTabNavigator();
export function TopNav() {
return (
<Tab.Navigator>
<Tab.Screen name="Timeline" component={TimelineComponent} />
<Tab.Screen name="Trending" component={TrendingComponent} />
</Tab.Navigator>
);
}
WallFragmentComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
Keyboard,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import {TopNav} from './TopNav';
const styles = StyleSheet.create({
container: {
padding: 20,
},
header_container: {
backgroundColor: 'white',
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
header_text: {
fontSize: 30,
fontWeight: '500',
},
new_chat_button: {
alignItems: 'center',
borderColor: 'blue',
borderWidth: 1,
borderRadius: 12,
display: 'flex',
flexDirection: 'row',
paddingHorizontal: 22,
paddingTop: 6,
paddingVertical: 6,
},
top_nav: {
marginVertical: 20,
},
});
class WallFragmentComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
input: {},
secureTextEntry: true,
};
}
handleInput = (name, value) => {
this.setState({
input: {...this.state.input, [name]: value},
});
};
render() {
return (
<View style={{backgroundColor: 'white'}}>
<SafeAreaView>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
accessible={false}>
<View style={styles.container}>
<View style={styles.header_container}>
<Text style={styles.header_text}>Wall</Text>
<TouchableOpacity style={styles.new_chat_button}>
<Icon name="comment" style={{marginEnd: 6, color: 'blue'}} />
<Text style={{fontWeight: '500', color: 'blue'}}>
New Post
</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
<View style={styles.top_nav}>
<TopNav />
</View>
</SafeAreaView>
</View>
);
}
}
export default WallFragmentComponent;
In the WallFragmentComponent.js file, I have placed <TopNav /> inside a View, but it's not rendering when I run the project. Here's the screenshot:
screenshot
How am I able to add top navigation just under the Wall Text and New Post button? any help will be much appreciated.
Thank you,
Regards
This might help
// TopNav.js
const Tab = createMaterialTopTabNavigator();
const AppNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Timeline" component={TimelineComponent} />
<Tab.Screen name="Trending" component={TrendingComponent} />
</Tab.Navigator>
)
}
export default AppNavigator;
WallFragmentComponent.js
import AppNavigator from './AppNavigator';
...........
const TopNav = createAppContainer(AppNavigator);
class WallFragmentComponent extends React.PureComponent {
......
render() {
return (
<View style={{backgroundColor: 'white'}}>
......
<TopNav />
......
</View>
);
}
}
You can also use react-native-scrollable-tab-view
Well, finally I have found the solution:
Change the first <View ... /> element into <SafeAreaView style={{flex: 1}} /> and then everything is working correctly.
WallFragmentComponent.js
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
Keyboard,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import {TopNav} from './TopNav';
const styles = StyleSheet.create({
container: {
padding: 20,
},
header_container: {
backgroundColor: 'white',
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
header_text: {
fontSize: 30,
fontWeight: '500',
},
new_chat_button: {
alignItems: 'center',
borderColor: 'blue',
borderWidth: 1,
borderRadius: 12,
display: 'flex',
flexDirection: 'row',
paddingStart: 22,
paddingEnd: 22,
paddingTop: 6,
paddingBottom: 6,
},
top_nav: {
marginTop: 20,
},
});
class WallFragmentComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
input: {},
secureTextEntry: true,
};
}
handleInput = (name, value) => {
this.setState({
input: {...this.state.input, [name]: value},
});
};
render() {
return (
<SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={styles.container}>
<View style={styles.header_container}>
<Text style={styles.header_text}>Wall</Text>
<TouchableOpacity style={styles.new_chat_button}>
<Icon name="comment" style={{marginEnd: 6, color: 'blue'}} />
<Text style={{fontWeight: '500', color: 'blue'}}>
{' '}
New Post
</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
<TopNav />
</SafeAreaView>
);
}
}
export default WallFragmentComponent;
Screenshot
And that's it

Check the render method of CartItem

Hi there I am trying to follow tutorial but it gives this check render method error. I am making Cart for shopping app
Here is CartScreen:
import React from 'react';
import { View, Text, FlatList, Button, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import Colors from '../../constants/Colors';
import CartItem from '../../components/shop/CartItem';
const CartScreen = props => {
const cartTotalAmount = useSelector(state => state.cart.totalAmount);
const cartItems = useSelector(state => {
const transformedCartItems = [];
for (const key in state.cart.items) {
transformedCartItems.push({
productId: key,
productTitle: state.cart.items[key].productTitle,
productPrice: state.cart.items[key].productPrice,
quantity: state.cart.items[key].quantity,
sum: state.cart.items[key].sum
});
}
return transformedCartItems;
});
return (
<View style={styles.screen}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
Total:{' '}
<Text style={styles.amount}>${cartTotalAmount.toFixed(2)}</Text>
</Text>
<Button
color={Colors.accent}
title="Order Now"
disabled={cartItems.length === 0}
/>
</View>
<FlatList data={cartItems}
keyExtractor={item => item.productId}
renderItem={itemData => (
<CartItem
quantity={itemData.item.quantity}
title={itemData.item.productTitle}
amount={itemData.item.sum}
onRemove={() => {}}
/>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
screen: {
margin: 20
},
summary: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
padding: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white'
},
summaryText: {
fontSize: 18
},
amount: {
color: Colors.primary
}
});
export default CartScreen;
And Here is my CartItem Component :
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from 'react-native';
import { Ionicons } from 'react-native-vector-icons';
const CartItem = props => {
return (
<View style={styles.cartItem}>
<View style={styles.itemData}>
<Text style={styles.quantity}>{props.quantity} </Text>
<Text style={styles.mainText}>{props.title}</Text>
</View>
<View style={styles.itemData}>
<Text style={styles.mainText}>${props.amount.toFixed(2)}</Text>
<TouchableOpacity onPress={props.onRemove} style={styles.deleteButton}>
<Ionicons
name={'ios-trash'}
size={23}
color="red"
/>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
cartItem: {
padding: 10,
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20
},
itemData: {
flexDirection: 'row',
alignItems: 'center'
},
quantity: {
color: '#888',
fontSize: 16
},
mainText: {
fontSize: 16
},
deleteButton: {
marginLeft: 20
}
});
export default CartItem;
I have copy paste the component inside the cart screen it works but as a component it does not work what should I do ?
What could be wrong here ?
Image of Error
I think you can try to change the way import your icons
import { Ionicons } from 'react-native-vector-icons';
It should be
import Ionicons from 'react-native-vector-icons/Ionicons'

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

Categories