I'm making a mobile app and then suddenly when I enter this Screen the whole app crashes. It was working before but, after I changed some style, it gave me some errors about too much Call Stack but stopped saying that and just crashes. I really don't know what's causing this. I tried to see if there was on the UseEffect() I think there is nothing there causing this.
import React, { useEffect, useState, useContext} from "react";
import {
View,
Text,
StatusBar,
TouchableOpacity,
ScrollView,
AsyncStorage,
Dimensions,
Image,
Alert,
} from "react-native";
import PlusImage from "../../../../assets/add_circle-24px.png";
import mainContext from "../../../services/contexts/mainContext";
import listContext from "../../../services/contexts/listContext";
import taskContext from "../../../services/contexts/taskContext";
import { MaterialIcons } from "#expo/vector-icons";
import styles from "./styles";
import TaskItem from "../../utils/TaskItem";
import Animated from "react-native-reanimated";
import { FlatList } from "react-native-gesture-handler";
export default function List({ route, navigation }) {
const {
clean,
getTasksList,
edited,
toogleEdited,
deleteList,
doneTasks,
todoTasks,
} = useContext(listContext);
const { taskEdited, idtask, deleteTask } = useContext(taskContext);
const [listName, setListName] = useState("");
const [screenTasks, setScreenTasks] = useState([{}]);
const [done, setDone] = useState(false);
const screenHeight = Math.round(Dimensions.get("window").height);
async function getListName() {
setListName(await AsyncStorage.getItem("listName"));
}
async function asyncGetTasks() {
await getTasksList();
}
useEffect(() => {
if (listName) getListName();
asyncGetTasks();
setScreenTasks(done ? doneTasks : todoTasks);
if (idtask) {
navigation.navigate("Task");
}
}, [edited, taskEdited, idtask, done]);
return (
<View style={styles.container}>
<StatusBar hidden />
<View style={styles.buttonsContainer}>
<TouchableOpacity
onPress={() => {
navigation.goBack();
clean();
}}
>
<MaterialIcons name="arrow-back" size={32} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
Alert.alert(
"Are you sure you want to delete this list?",
"",
[
{
text: "Cancel",
style: "cancel",
},
{
text: "OK",
onPress: () => {
deleteList();
clean();
navigation.goBack();
},
},
],
{ cancelable: true }
);
}}
>
<MaterialIcons name="delete" size={32} color="#bc0000" />
</TouchableOpacity>
</View>
<View style={styles.titleContent}>
<Text style={styles.titleText}>{listName}</Text>
</View>
<View style={styles.midButtonsContainer}>
<View
style={{
opacity: 1,
backgroundColor: done ? null : "#dddddd",
borderRadius: 7,
padding: 8,
opacity: 1,
}}
>
<TouchableOpacity
onPress={() => {
setDone(false);
toogleEdited();
}}
>
<Text>To do</Text>
</TouchableOpacity>
</View>
<View
style={{
opacity: 1,
backgroundColor: done ? "#dddddd" : null,
borderRadius: 7,
padding: 8,
opacity: 1,
}}
>
<TouchableOpacity
onPress={() => {
setDone(true);
toogleEdited();
}}
>
<Text style={styles.doneButton}>Done</Text>
</TouchableOpacity>
</View>
</View>
{screenTasks.length > 0 ? (
<FlatList
data={screenTasks}
renderItem={(item, index) => {
return (
<TaskItem
OnSwipeRight={() => deleteTask(item.item._id)}
{...{ item }}
/>
);
}}
/>
) : (
<View style={styles.emptyContent}>
<Text style={styles.emptyText}>This list don't have tasks yet</Text>
</View>
)}
<TouchableOpacity
style={{
position: "absolute",
top: screenHeight - 120,
right: 28,
flexDirection: "row",
width: 50,
alignSelf: "flex-end",
}}
onPress={() => {
navigation.navigate("NewTask");
}}
>
<Image source={PlusImage} />
</TouchableOpacity>
</View>
);
}
Have you tried to import it from the react lib?
import React, { useEffect } from 'react';
I don't see it in your import above.
Related
I am relatively new to React-Native and mobile app development. I am trying to create a clone of Instagram. And in the post screen what I do is I have a button Camera and once I click on it, that should take me to CameraView screen. And in the CameraView screen I will take a picture using expo-camera and save the picture in a variable. So here, I want to export the picture and then import it in my Post screen, so that the user can have a preview of what the picture looks like before uploading. And another thing to note is that, the Post screen will by default have a Placeholder image and once the image is taken the placeholder image has to be replaced with the image.
I tried this code but it didnt work.
My Post screen :-
import { View, Text, Image, TextInput } from 'react-native';
import React, { useState, useEffect } from 'react'
import * as Yup from 'yup';
import { Formik } from 'formik'
import { Button, Divider } from 'react-native-elements';
import { useNavigation } from '#react-navigation/native';
import CameraView, { takePicture } from '../../screens/CameraView';
const PLACEHOLDER_IMG = require('../../assets/defImg.png')
const uploadPostSchema = Yup.object().shape({
caption: Yup.string().max(2200, 'Caption cannot exceed character limit.')
})
const FormikPostUploader = ({route}) => {
const [thumbnailUrl, setThumbnailUrl] = useState(PLACEHOLDER_IMG)
const navigation = useNavigation()
const handleCameraPress = () => {
UserImage = takePicture()
setThumbnailUrl(UserImage)
navigation.navigate('CameraView')
}
return (
<Formik
initialValues={{ imageUrl: '', caption:'' }}
onSubmit={(values) => console.log(values)}
validationSchema={uploadPostSchema}
validateOnMount={true}>
{({
handleBlur,
handleChange,
handleSubmit,
values,
errors,
isvalid
}) => (
<>
<View style={{ margin: 20, justifyContent: 'space-between', flexDirection: 'row' }}>
<Image source={thumbnailUrl} />
<View style={{ flex: 1, margin: 15 }}>
<TextInput
placeholder='Write a caption...'
placeholderTextColor='gray'
multiline={true}
style={{ color: 'white', fontSize: 17 }}
onChangeText={handleChange('caption')}
onBlur={handleBlur('caption')}
value={values.caption}
/>
</View>
</View>
<Divider width={0.5} orientation='vertical'/>
<View style={{ alignItems: 'center', marginTop: 15 }}>
<Text style={{ fontSize: 18, fontWeight: 'bold', color: 'white' }}>Choose Image</Text>
</View>
<View style={{ justifyContent: 'space-between', flexDirection: 'column', margin: 20 }}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', margin: 30 }}>
<Button title='Camera' onPress={handleCameraPress}/>
<Button title='Gallery' onPress={() => navigation.navigate('GalleryView')} />
</View>
<Button onPress={handleSubmit} title='Post' disabled={isvalid} />
</View>
</>
)}
</Formik>
)
}
export default FormikPostUploader
And my CameraView screen :-
import { View, Text, Image, StyleSheet, Button } from 'react-native'
import React, {useState, useEffect} from 'react'
import { Camera } from 'expo-camera'
import { TouchableOpacity } from 'react-native'
import { useNavigation } from '#react-navigation/native'
import { PLACEHOLDER_IMG } from '../components/newPost/FormikPostUploader'
export const takePicture = async(camera) => {
const data = await camera.takePictureAsync(null)
return data.uri
}
const Header = () =>{
const navigation = useNavigation()
return (
<View style = {styles.headerContainer}>
<TouchableOpacity style = {{marginBottom:15}} onPress={() => navigation.goBack()}>
<Image source = {require('../assets/back.png')} style = {{width:35, height:35, margin:20}}/>
</TouchableOpacity>
<Text style={{color:'white', fontWeight: '700', fontSize:20, marginRight: 25, marginTop:35, marginBottom:15}}>New Post</Text>
<Text> </Text>
</View>
)
}
const CameraView = () => {
const UserImage = takePicture()
const navigation = useNavigation()
const [hasCameraPermission, setHasCameraPermission] = useState(null)
const [thumbnailUrl, setThumbnailUrl] = useState(PLACEHOLDER_IMG)
const [camera, setCamera] = useState(null)
const [type, setType] = useState(Camera.Constants.Type.back)
const captureImage = async () => {
if (camera) {
const UserImage = await takePicture(camera)
setThumbnailUrl(UserImage)
}
}
useEffect(() => {
(async() => {
const cameraStatus = await Camera.requestCameraPermissionsAsync()
setHasCameraPermission(cameraStatus.status === 'granted')})()},
[])
if (hasCameraPermission === null) {
return <View/>
}
if (hasCameraPermission === false){
return <Text>Enable access for Camera to proceed</Text>
}
return (
<View style={{ flex: 1, backgroundColor: 'black'}}>
<Header/>
<Camera
ref = {ref => setCamera(ref)}
style={styles.fixedRatio}
type={type}
ratio={'1:1'}/>
<View style = {styles.cameraContainer}>
<TouchableOpacity onPress={() => {setType(type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back)}}>
<Image source={require('../assets/turn-camera.png')} style = {{width:70, height:70, margin: 15}}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => {captureImage(), navigation.goBack(), console.log(UserImage)}}>
<Image source={require('../assets/camera-shutter.png')} style = {{width:70, height:70, marginRight:60}}/>
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
cameraContainer: {
flex:0.15,
backgroundColor: 'black',
flexDirection:'row',
justifyContent: 'space-between',
alignItems: 'center',
},
fixedRatio: {
flex:0.99,
aspectRatio:0.9
},
headerContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor:'black'
},
icon: {
width:25,
height: 25,
marginHorizontal:15,
marginTop:30,
},
iconContainer: {
flexDirection:'row',
justifyContent: 'space-between',
height:50,
},
}
)
export default CameraView
Am I doing anything wrong. Can you help me fix this. Thanks in advance!
My Custom Button that should take me home doesn't and give me an "undefined error." I'm pretty sure its because the Stack Navigator stuff is in the main file, but I don't know how to give this code file access to it and my Google efforts and the Docs have been unsuccessful. Any help on this simple issue would be appreciated.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';
function BattleScreen({ navigation }) {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
},
topHalf: {
flex: 1,
color: 'white',
},
bottomHalf: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
buttonRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap'
},
text: {
fontSize: 90,
color: 'white',
fontFamily: "Valorax",
}
});
export default BattleScreen;
**strong text**
Try using the useNavigation hook (https://reactnavigation.org/docs/use-navigation/):
import { useNavigation } from '#react-navigation/native';
function BattleScreen() {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
const navigation = useNavigation()
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
I'm building an instagram clone using React Native with Homescreen consisting of custom Header and Imagepost components,but it isn't showing up properly on android although it displays perfectly on web view(images below).
I only added the Text and the Test Button for testing purposes
HomeScreen.js:
import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Button } from "react-native";
import axios from "axios";
import ImagePost from "../../components/ImagePost";
import Header from "../../components/Header";
import Ionicons from "react-native-vector-icons/Ionicons";
import useStore from "../../store";
const HomeScreen = ({ navigation }) => {
const [posts, setposts] = useState([]);
const [current, setcurrent] = useState(null);
const user = useStore((state) => state.currentUser);
const setcurrentUser = useStore((state) => state.setcurrentUser);
useEffect(() => {
axios.get("http://localhost:5000/posts").then((response) => {
console.log(response.data.posts);
setposts(response.data.posts);
});
}, []);
return (
<View>
<Header navigation={navigation} />
<Text>huidhoasodhiohdp</Text>
<Button title="test" />
{console.log("now user", user)}
{console.log("posts", posts)}
{posts &&
posts.map((post) => {
return (
<View key={post._id}>
<ImagePost post={post} navigation={navigation} />
{console.log("This post is", post)}
</View>
);
})}
</View>
);
};
export default HomeScreen;
Header.js:
import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import useStore from "../store";
const Header = ({ navigation }) => {
console.log("header navigation", navigation);
const user = useStore((state) => state.currentUser);
return (
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "white",
}}
>
<TouchableOpacity
onPress={() => navigation.navigate("AddScreen")}
style={{ margin: "5%" }}
>
<Ionicons name="add-outline" size={25} color="black" />
</TouchableOpacity>
{user && <Text>{user.username}</Text>}
{user && console.log(user.username)}
<TouchableOpacity style={{ margin: "5%" }}>
<Ionicons name="chatbubble-ellipses-outline" size={25} color="black" />
</TouchableOpacity>
</View>
);
};
export default Header;
ImagePost.js :
import React from "react";
import { View, Text, Image, TouchableOpacity, Button } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
const ImagePost = ({ post, navigation }) => {
return (
<View>
<View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
<Image
style={{
width: 50,
height: 50,
borderRadius: 50,
marginRight: "3%",
}}
source={post.creator.pic}
/>
<Text style={{ fontWeight: "bold" }}>User</Text>
</View>
<View style={{ width: "100%", height: 450 }}>
<Image
style={{ resizeMode: "cover", height: "100%" }}
source={post.file}
/>
<View style={{ flex: 1, flexDirection: "row", marginBottom: "6%" }}>
<TouchableOpacity style={{ marginRight: "1%" }}>
<Ionicons name="heart-outline" size={25} color="black" />
</TouchableOpacity>
<TouchableOpacity
style={{ marginRight: "1%" }}
onPress={() =>
navigation.navigate("CommentsScreen", { postId: post._id })
}
>
<Ionicons name="chatbubble-outline" size={25} color="black" />
</TouchableOpacity>
</View>
<Text>
<Text style={{ fontWeight: "bold", marginRight: "5%" }}>
{post.creator.userName}
</Text>
{post.description}
</Text>
</View>
</View>
);
};
export default ImagePost;
Android view
Web view
I am not using classes or functions as a native component, I am using const with props as a parameter.
In my project I am using Firestore as database and I want to pass data from one screen to another and I don't know how, can someone give me some tips ?
My other problem is in the firestore query because I need to put .doc(firebase.auth().currentUser) and when I test my application an error occurs in the application.
BreadAndBounty.js
import React, { useState, useEffect } from "react";
import { View, Text, TextInput, StyleSheet, Image, ScrollView, TouchableOpacity, StatusBar, SafeAreaView, FlatList, Dimensions, ImageBackground } from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import Constants from 'expo-constants'
import firebase, { firestore } from 'firebase'
require('firebase/firestore')
const { width, height } = Dimensions.get("window");
const BreadAndBounty = (props) => {
const [adverts, setAdverts] = useState([])
const getAdverts = async () => {
const querySnap = await firestore()
.collection('adverts')
.get()
const result = querySnap.docs.map(docSnap => docSnap.data())
setAdverts(result)
}
useEffect(() => {
getAdverts()
}, [])
const renderItem = (item) => {
return (
<View>
<View style={{
flexDirection: "row",
paddingTop: 50,
alignItems: "center"
}}>
<View style={{ width: "20%" }}>
</View>
<View style={{
width: "60%"
}}>
<Text style={{
fontWeight: "bold",
fontSize: 14,
color: "#044244"
}}>{item.title}</Text>
<Text style={{
fontWeight: "900",
fontSize: 12,
color: "#9ca1a2"
}}>
{item.name}
</Text>
</View>
<View style={{
width: "20%",
alignItems: "flex-end"
}}>
</View>
</View>
<TouchableOpacity
onPress={() => props.navigation.navigate(("AdvertsDetail"), { uid: firebase.auth().currentUser })}
style={{
flexDirection: "row",
width: "100%",
paddingTop: 20
}}>
<ImageBackground
source={item.image}
style={{
width: 300,
height: 220,
borderRadius: 30,
}}
imageStyle={{
borderRadius: 30,
}}
>
<View style={{
height: "100%",
flexDirection: "row",
alignItems: 'flex-end',
justifyContent: "flex-end"
}}>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
)
}
return (
<ScrollView showsVerticalScrollIndicator={false}
style={{
height: "100%",
backgroundColor: "#62929E"
}}>
<View style={styles.view1}>
<View style={styles.view2}>
<View>
</View>
<View style={styles.view3}>
</View>
</View>
<Text style={styles.text1}>Bread And Bounty</Text>
<View style={styles.view_search}>
<TextInput
placeholder="Pesquisar anúncios de voluntariado..."
style={styles.textinput}>
</TextInput>
<Ionicons
name="search"
size={15}
color="#9CALA2"
></Ionicons>
</View>
</View>
<View style={styles.view4}>
<View style={{ width: "100%" }}>
<FlatList
numColumns={1}
horizontal={false}
showsVerticalScrollIndicator={false}
style={{
display: "flex",
height: Dimensions.get("screen").height,
width: Dimensions.get("screen").width
}}
data={adverts}
renderItem={({ item }) => renderItem(item)} />
</View>
</View>
</ScrollView>
)
}
export default BreadAndBounty
AdvertsDetail
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const [currentUser, Adverts] = useState([])
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail
We can simply access the params from the previous screen in the new screen by accessing the props of the current screen.
ex.
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const currentUser = props.route.params.uid
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail
Check out the official docs from react-navigation for passing the params to the screen and accessing it.
https://reactnavigation.org/docs/params/
I have been finding it very difficult to search a mapped list in react native. Actually, doing that with a Flatlist would be very easy for me, but this is really giving me a headache. I hope someone will be able to help me out.
So, the code looks like this
import React, { Component, useState } from 'react';
import { Button, Animated, Share, ScrollView,
ImageBackground, StyleSheet, View} from "react-native";
import { Container, Header, Content, ListItem, Item, Input, Text, Icon, Left, Body, Right, Switch } from 'native-base';
const Auslawpart = ({ route, navigation}) => {
const {parts, hereme} = route.params;
const [search, setSearch] = useState('');
const [filteredDataSource, setFilteredDataSource] = useState(parts);
const filterSearch = (text) => {
const newData = parts.filter((part)=>{
const itemData = part.name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData)>-1
});
setFilteredDataSource(newData);
setSearch(text);
}
return (
<Container>
<Animated.View
style={{
transform:[
{translateY:translateY }
],
elevation:4,
zIndex:100,
}}
>
<View style={{
// marginTop:Constant.statusBarHeight,
position:"absolute",
top:0,
left:0,
right:0,
bottom: 0,
height: 50,
backgroundColor:"#f0f0f0",
borderBottomWidth: 1,
borderBottomColor: '#BDC3C7',
flexDirection:"row",
justifyContent:"space-between",
elevation: 4,
}}>
<View style={{margin: 10, flex: 1 }}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Icon type="MaterialIcons" name="arrow-back" style={{ left: 10, }}
size={50} />
</TouchableOpacity>
</View>
<View style={{
justifyContent:"space-around",
margin: 4,
flex: 1,
marginLeft:0,
}}>
<Text numberOfLines={3} style={{fontSize:10,
alignSelf: 'flex-end', color:"#212F3C",
padding: 2}}>{hereme}</Text>
</View>
</View>
</Animated.View>
<Content style={{marginTop:50}}>
<Item>
<Icon type= "MaterialIcons" />
<Input placeholder="Search legal terms and maxisms"
onChangeText={(text) => filterSearch(text)}
/>
<Icon type="Octicons" name="law" />
</Item>
{parts.map((part) => (
<TouchableOpacity
key={part.name}
>
<ListItem onPress={() =>
navigation.navigate("Auslawcount", {
meaning: part.meaning,
partname: part.name})
}>
<Icon type="Octicons" name="law" />
<Body>
<Text onScroll={(e)=>{
scrollY.setValue(e.nativeEvent.contentOffset.y)
}} style={{ fontSize: 17, fontFamily: "Lato-Regular",}} key={part.name}>{part.name.toUpperCase()}</Text>
</Body>
</ListItem>
</TouchableOpacity>
))}
</Content>
</Container>
);
};
export default Auslawpart;
The data in part.name are passed from another screen to this screen. I am try to make the Input field search through the mapped part.name. can anybody please help me with a solution.
Here is an Example
snack: https://snack.expo.io/#ashwith00/bold-waffles
const data = [
{ name: 'Suleman' },
{ name: 'Sulan' },
{ name: 'Suljan' },
{ name: 'Ram' },
{ name: 'Raj' },
];
const Auslawpart = ({ route, navigation }) => {
const {} = route.params;
const [filteredDataSource, setFilteredDataSource] = useState(parts);
const filterSearch = (text) => {
if (text.length > 0) {
const newList = data.filter((part) => {
const name = part.name.toUpperCase();
const textData = text.toUpperCase();
return name.includes(textData);
});
setFilteredDataSource(newList);
} else {
setFilteredDataSource(parts);
}
};
return (
<View>
<TextInput placeholder="Enter here" onChangeText={filterSearch} />
<ScrollView>
{filteredDataSource.map((item, i) => (
<Text key={i} style={{ paddingVertical: 30 }}>
{item.name}
</Text>
))}
</ScrollView>
</View>
);
};