I want to add Async Storage to my flatlist in todo list app.
this is my App.js code:
import { StatusBar } from 'expo-status-bar';
import {
StyleSheet,
Text,
View,
KeyboardAvoidingView,
FlatList,
TextInput,
TouchableOpacity,
Keyboard,
} from 'react-native';
import React, { useState, useEffect } from 'react';
import {
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
} from '#expo-google-fonts/poppins';
import { useFonts } from 'expo-font';
import Task from './components/Task';
import AppLoading from 'expo-app-loading';
export default function App() {
const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);
let [fontsLoaded, error] = useFonts({
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
});
if (!fontsLoaded) {
return <AppLoading />;
}
const handleAddTask = async () => {
try {
Keyboard.dismiss();
setTaskItems([...taskItems, task]);
setTask('');
} catch (err) {
console.log(err);
}
};
const completeTask = (index) => {
let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy);
};
const deleteItem = (index) => {
let arr = [...taskItems];
arr.splice(index, 1);
setTaskItems(arr);
};
return (
<View style={styles.container}>
{/* Todays Tasks */}
<View style={styles.taskWrapper}>
<Text style={styles.sectionTitle}>Today's Tasks</Text>
<View style={styles.items}>
{/* This is where the tasks will go! */}
<FlatList
data={taskItems}
keyExtractor={(item) => item.id}
renderItem={({ item, index }) => (
<Task text={item} handleDelete={() => deleteItem(index)} />
)}
/>
</View>
</View>
{/* Write a Task */}
<KeyboardAvoidingView style={styles.writeTaskWrapper}>
<TextInput
style={styles.input}
placeholder={'Write A Task'}
value={task}
onChangeText={(text) => setTask(text)}
/>
<TouchableOpacity onPress={() => handleAddTask()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
taskWrapper: {
paddingTop: 80,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
backgroundColor: '#fff',
fontFamily: 'Poppins_600SemiBold',
borderRadius: 10,
margin: 'auto',
width: 250,
height: 60,
textAlign: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 5,
paddingTop: 10,
},
items: {
marginTop: 30,
},
writeTaskWrapper: {
position: 'absolute',
bottom: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
input: {
paddingVertical: 15,
paddingHorizontal: 15,
backgroundColor: '#fff',
borderRadius: 60,
width: 250,
fontFamily: 'Poppins_400Regular',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#fff',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3,
},
addText: {},
});
THIS IS MY TASK.JS CODE:
import React from 'react';
import {View,Text,StyleSheet,Dimensions,Animated,TouchableOpacity} from 'react-native';
import AppLoading from 'expo-app-loading'
import {
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic
} from '#expo-google-fonts/poppins'
import {useFonts} from 'expo-font'
import Swipeable from 'react-native-gesture-handler/Swipeable';
const SCREEN_WIDTH = Dimensions.get('window').width;
const Task = (props) => {
let [fontsLoaded,error]=useFonts({
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic
})
if (!fontsLoaded){
return <AppLoading/>
}
const leftSwipe = (progress, dragX) => {
const scale = dragX.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
extrapolate: 'clamp',
});
return (
<TouchableOpacity onPress={props.handleDelete} activeOpacity={0.6}>
<View style={styles.deleteBox}>
<Animated.Text style={{transform: [{scale: scale}],color:'#fff',fontFamily:"Poppins_400Regular",fontSize:18}}>
Delete
</Animated.Text>
</View>
</TouchableOpacity>
);
};
return(
<Swipeable renderLeftActions={leftSwipe}>
<View style={styles.item}>
<View style={styles.itemLeft}>
<View style={styles.square}>
</View>
<Text style={styles.itemText}>
{props.text}
</Text>
</View>
<View style={styles.circular}>
</View>
</View>
</Swipeable>
)
}
const styles = StyleSheet.create({
item:{
backgroundColor:'white',
padding:15,
borderRadius:10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom:20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3
},
itemLeft:{
flexDirection: 'row',
alignItems: 'center',
flexWrap:'wrap',
},
square:{
width:24,
height:24,
backgroundColor:'#55BCF6',
opacity:0.5,
borderRadius:5,
marginRight:15,
},
itemText:{
maxWidth:'80%',
fontFamily:'Poppins_400Regular'
},
circular:{
width:12,
height:12,
borderColor:'#55BCF6',
borderWidth:2,
borderRadius:5
},
deleteBox:{
backgroundColor:'red',
justifyContent:'center',
alignItems:'center',
width:100,
height:55,
borderRadius:10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 5,
}
});
export default Task;
i am learning react native so i dont know much about it
so i want to add async storage such that its shows the tasks which are created after re-opening the app
kindly help with providing code
and yeah i have used expo and swipeable for deleting the tasks
import async-storage
import AsyncStorage from '#react-native-async-storage/async-storage';
get stored task
const task await AsyncStorage.getItem('task')
if(task!=null)
switch(task{
... your cases ...
set a task
await AsyncStorage.setItem('task', 'taskName')
in case refreshing task
await AsyncStorage.removeItem('keyName')
I am trying to use flexbox to make the content within a Modalize view go to 100% of the Modal view. Currently, it's only going to the height of the content, and not the modal.
With this code:
<Modalize
// onOpen={onOpen}
onOpened={() => console.log("ONOPEN")}
ref={modalizeRef}
modalStyle={{ flex: 1,
backgroundColor: 'yellow',
shadowColor: '#000', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.45, shadowRadius: 16,
}}
alwaysOpen={85}
handlePosition="inside"
>
<View style={{ flex: 1, backgroundColor: 'green' }}>
<Text>
Data here
</Text>
</View>
</Modalize>
It looks like this:
How can I make it so the green background fills the entire height of the modal?
Use Dimensions to set the height.
Sample Example: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Modalize } from 'react-native-modalize';
const window = Dimensions.get('screen');
export default function App() {
const modalizeRef = React.useRef();
return (
<View style={styles.container}>
<Modalize
// onOpen={onOpen}
onOpened={() => console.log('ONOPEN')}
ref={modalizeRef}
modalStyle={{
flex: 1,
backgroundColor: 'yellow',
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.45,
shadowRadius: 16,
}}
alwaysOpen={85}
handlePosition="inside">
<View style={{ height: window.height * 0.85, backgroundColor: 'green' }}>
<Text>Data here</Text>
</View>
</Modalize>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
I was wondering if anyone knew anyway to make the shadow styles on a react native view component work. I scavenged all of the web and could not find any solutions. My code is shown below:
//Stylesheet code:
...
profileImage: {
width: 170,
height: 170,
overflow: "hidden",
marginLeft: (Dimensions.get('window').width/2) - 85,
marginTop: 30,
borderRadius: 170,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
},
...
//View component:
<View style={styles.profileImage}>
<Image source={require("../assets/images/temporaryProfilePicture.jpg")} style={styles.image} resizeMode="cover"></Image>
</View>
...
Any and all help would be largely appreciated. Thank you in advance!
This is what ive achieved with your code and link to it :expo-snack :
import * as React from 'react';
import { Text, View, StyleSheet,Dimensions ,Image} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image source={{uri:'https://source.unsplash.com/random'}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: 170,
height: 170,
overflow: "hidden",
marginLeft: (Dimensions.get('window').width/2) - 85,
marginTop: 30,
borderRadius: 170,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
I am trying to create a box-shadow around a view in react-native version 0.59.9
I have tried 'shadowOffSet' and all shadow properties but no use
import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';
const styles = {
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
}
export default class Card extends Component {
render() {
return (
<View style={styles.container}>
<View style={{
borderWidth: 1,
borderRadius: 20,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 20,
borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)),
elevation: 1,
justifyContent: 'center',
alignItems: 'center',
overflow: this.props.overflow ? this.props.overflow : 'hidden',
width: 120,
height: 150}}>
<Text>Mine</Text>
</View>
</View>
);
}
}
The result is attached as screenshot
https://user-images.githubusercontent.com/14028306/60788321-0a283500-a17a-11e9-841d-5604982783ac.jpg
You can use the react native box shadow generator for the best practice.
https://ethercreative.github.io/react-native-shadow-generator/
please use this example for boxShow in react-native
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.buttonStyles}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
buttonStyles: {
backgroundColor: '#f2f2f2',
paddingVertical: 10,
width: '60%',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.9,
elevation: 10,
},
welcome: {
fontSize: 20,
alignSelf: 'center',
}
});
Your code is valid on ios plateform for the bowShadow but for android you have to pass by the property elevation
Increasing the elevation parameter in your View style will increase the radius of the box-shadow on android devices:
https://snack.expo.io/S1NK7dxbr
As an aside, you have borderWidth listed twice as a style in your nested View component.
I wanna achieve button with shadow in react native with no border and spread, I have tried something like this,
{
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 6,
backgroundColor : "#0000",
shadowRadius: 15 ,
shadowOffset : { width: 56, height: 13},
borderWidth:0,
borderRadius:0,
}
But the shadow is not spreading and offset is not also working as expected. I want to achieve something like this,
Codepen
Tried adding it directly on Button but no luck. You can try this way by using TouchableOpacity.
import React, { Component } from 'react';
import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Button title="Submit" />
</TouchableOpacity>
<TouchableOpacity style={styles.buttonHover}>
<Button title="Submit" />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
button: {
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
backgroundColor: '#FFFFFF',
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowOpacity: 0.8,
elevation: 6,
shadowRadius: 15 ,
shadowOffset : { width: 1, height: 13},
},
buttonHover: {
marginTop: 10,
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
shadowColor: 'rgba(46, 229, 157, 0.4)',
shadowOpacity: 1.5,
elevation: 8,
shadowRadius: 20 ,
shadowOffset : { width: 1, height: 13},
backgroundColor: '#2EE59D',
color: '#FFFFFF'
}
});