I want to make a to-do app for learn React-Native. I added an add button for new tasks. When you push the button, add button is hide and textInput, save button are show. In here, keyboard focus has to automatic. So, I opened autofocus but it is doesn't work when first push the button. AutoFocus works except first push. I am so sory for my bad English. (I run app on my android device)
App.js codes:
import React from "react";
import {SafeAreaView, StyleSheet, Text, View, FlatList} from "react-native";
import Add from "./components/add/add"
function App() {
return(
<SafeAreaView style={styles.container}>
<FlatList
ListHeaderComponent={
<View style={styles.top_container}>
<Text style={styles.title}>To-Do</Text>
<Text style={styles.count}>0</Text>
</View>
}
/>
<Add/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:"#102027"
},
title:{
color:"#FFA500",
fontSize:30,
fontWeight:"bold"
},
top_container:{
flexDirection:"row",
padding:20,
justifyContent:"space-between"
},
count:{
color:"#FFA500",
fontSize:30,
fontWeight:"bold",
},
})
export default App;
add.js codes :
import React from "react";
import {useEffect ,useState} from "react";
import {View, TouchableOpacity, Image, TextInput, Text, TouchableHighlight} from "react-native";
import styles from "./add.style"
function Add() {
const [add_mode_as_btn, set_add_mode_as_btn] = useState(true);
return(
<View>{add_mode_as_btn==true?
<View style={styles.add_btn_container}>
<TouchableHighlight
onPress={() => {set_add_mode_as_btn(false)}}
style={styles.add_btn}>
<Image style={styles.add_btn_image} source={require('./icons/add.png')}/>
</TouchableHighlight>
</View>
:
<View style={styles.save_container}>
<TextInput autoFocus={true} style={styles.save_text_input} placeholder="Add Task" placeholderTextColor={"#808080"}/>
<TouchableOpacity
style={styles.save_btn}
onPress={() => set_add_mode_as_btn(true)}
>
<Text style={{color:"white", fontSize:20, fontWeight:"bold"}}>Save</Text>
</TouchableOpacity>
</View>
}
</View>
);
};
export default Add;
add.style.js codes:
import { StyleSheet } from "react-native";
export default StyleSheet.create({
add_btn_container:{
alignItems:"center"
},
add_btn:{
width: 45,
height: 45,
padding: 10,
borderRadius: 100,
backgroundColor: "#FFA500",
marginBottom:10,
},
add_btn_image: {
width: 25,
height: 25,
color:"white"
},
save_container:{
backgroundColor:"#37474f",
margin:10,
padding:10,
alignItems:"stretch",
borderRadius:15
},
save_btn:{
backgroundColor:"#FFA500",
borderRadius:15,
padding:10,
alignItems:"center",
marginTop:10,
},
save_text_input:{
borderBottomWidth:2,
color:"white",
borderBottomColor:"#78909C"
}
})
