Develop Reference

ReactNative animation is not working after the api call

here is my code.
const actionButtonsAnimated = new Animated.Value(0);
const animated = new Animated.Value(255);
const animateTrendingCardSheet = () => {
Animated.timing(animated, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
}).start();
Animated.timing(actionButtonsAnimated, {
toValue: -180,
duration: 1000,
useNativeDriver: true,
}).start();
};
<Animated.View
style={[
{
transform: [{ translateY: actionButtonsAnimated }],
},
]}
>
<MainActionButtons />
</Animated.View>
<Animated.View
style={[
{
transform: [{ translateY: animated }],
width: "100%",
position: "absolute",
bottom: 0,
},
]}
>
<View style={styles.trendingCards}>
<Text h5 center color={colors.trendingText}>
Trending in your area...
</Text>
<View style={styles.flatlistWrapper}>
<FlatList
horizontal={true}
data={trendingCards}
renderItem={({ item }) => <TrendingCardComponent card={item} />}
/>
</View>
</View>
</Animated.View>
so if i call the animateTrendingCardSheet function inside useEffect like this.
useEffect(() => {
animateTrendingCardSheet()
}, [])
it works as expected but once i put it in a condition that it should be called after the API call has been finished it does not work at all if i again save the file it hot reload animation works
useEffect(() => {
if (loadTrendingCard) {
animateTrendingCardSheet();
}
}, [loadTrendingCard]);

Your issue is that after the first call to animateTrendingCardSheet the toValue that you are animating to is the current value of your Animated variables; so it looks like nothing is happening. You can counteract this by resetting your animation variables before calling your animation function:
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Animated,
TouchableOpacity,
FlatList,
Button
} from 'react-native';
import Constants from 'expo-constants';
const MainActionButtons = () => {
return (
<View
style={{
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
}}>
<TouchableOpacity>Btn 1</TouchableOpacity>
<TouchableOpacity>Btn 2</TouchableOpacity>
<TouchableOpacity>Btn 3</TouchableOpacity>
<TouchableOpacity>Btn 4</TouchableOpacity>
</View>
);
};
const TrendingCardComponent = ({ card }) => {
return (
<View style={{ width: '100%' }}>
<Text>{card.title}</Text>
<Text>{card.message}</Text>
</View>
);
};
const trendingCards = [
{ title: 'A Cool Card', message: 'A cool message' },
{ title: 'Card 1', message: 'A cool message' },
{ title: 'A Cool Card', message: 'A cool message' },
{ title: 'A Cool Card', message: 'A cool message' },
];
const initialActionButton = 0;
const initialAnimated = 255;
export default function App() {
const actionButtonsAnimated = new Animated.Value(initialActionButton);
const animated = new Animated.Value(initialAnimated);
const opacity = new Animated.Value(1)
const onApiCall = ()=>{
// set opacity to 0
Animated.timing(opacity,{toValue:0,duration:500}).start(()=>{
// when view is invisible do resets
animated.setValue(initialAnimated)
actionButtonsAnimated.setValue(initialActionButton)
Animated.timing(opacity,{toValue:1,duration:500}).start()
animateTrendingCardSheet()
})
}
const animateTrendingCardSheet = () => {
Animated.timing(animated, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
}).start();
Animated.timing(actionButtonsAnimated, {
toValue: -180 ,
duration: 1000,
useNativeDriver: true,
}).start();
};
// React.useEffect(() => {
// animateTrendingCardSheet();
// }, []);
return (
<View style={styles.container}>
<Button title="Simulate API call" onPress={onApiCall}/>
<Animated.View
style={[
{
transform: [{ translateY: actionButtonsAnimated }],
opacity
},
]}>
<MainActionButtons />
</Animated.View>
<Animated.View
style={[
{
transform: [{ translateY: animated }],
width: '100%',
position: 'absolute',
bottom: 0,
opacity
},
]}>
<View style={styles.trendingCards}>
<Text>Trending in your area...</Text>
<View style={styles.flatlistWrapper}>
<FlatList
style={{ flex: 1 }}
horizontal={true}
data={trendingCards}
renderItem={({ item }) => <TrendingCardComponent card={item} />}
/>
</View>
</View>
</Animated.View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
flatlistWrapper: {
width: '100%',
height: 200,
},
});
Demo

The above answer is good but it does not solve my problem, its all due to a stupid mistake, the issue was i was setting the state before calling the animation call function, as the state changes and it interfere the animation i had to use useRef like this.
const actionButtonsAnimated = useRef(new Animated.Value(initialActionButton)).current;
const animated = useRef(new Animated.Value(initialAnimated)).current;
it reference the state and animation works as expected.

How do you change the entire selection to individual choices in React Native?

We are currently developing based on React Native.
And I received data by GET request through API document,
and I created scroll view through MAP method.
So now I'm trying to make it possible to choose,
but if I choose one, it's all chosen.
How can I make you choose one by one if I choose one from my code?
import React, { useEffect, useState } from "react";
import { SvgCssUri } from "react-native-svg";
import { DeviceEventEmitter } from "react-native";
import {
View,
StyleSheet,
TouchableHighlight,
Text,
ScrollView,
Image,
} from "react-native";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import axios from "axios";
import BouncyCheckbox from "react-native-bouncy-checkbox";
const Select = ({ navigation }) => {
let bouncyCheckboxRef = null;
const [bodyType, setBodyType] = useState([]);
const [standardSelected, setStandardSelected] = useState(false);
const [isSelected, setSelected] = useState(false);
const bodyGetData = async () => {
let body = [];
try {
let config = {
method: "get",
url:
"http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/male",
headers: {},
};
axios(config).then(function (response) {
response.data.data.map((u) => {
switch (u.bodyType) {
case "standard":
body.push({ bodyType: "스탠다드", imgUrl: u.imgUrl, key: 1 });
break;
case "reverseTriangle":
body.push({ bodyType: "역삼각형", imgUrl: u.imgUrl, key: 2 });
break;
case "triangle":
body.push({ bodyType: "삼각형", imgUrl: u.imgUrl, key: 3 });
break;
case "circle":
body.push({ bodyType: "원형", imgUrl: u.imgUrl, key: 4 });
break;
case "hourglass":
body.push({ bodyType: "직사각형", imgUrl: u.imgUrl, key: 5 });
break;
}
});
return setBodyType(body);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
bodyGetData();
});
return unsubscribe;
}, [navigation]);
const onClick = (e) => {
console.log(e);
bodyType.map((u) => {
switch (u.bodyType) {
case u.bodyType === "스탠다드":
setSelected(!isSelected);
console.log(isSelected);
break;
case "역삼각형":
setSelected(!isSelected);
break;
}
});
};
return (
<View style={styles.container}>
<Text
style={{ fontSize: wp("5.5%"), fontWeight: "bold", marginBottom: 21 }}
>
자신의 체형을 선택해 주세요
</Text>
<View style={{ flexDirection: "row", marginBottom: hp("10%") }}>
<Text style={{ fontSize: wp("4.5%"), marginRight: wp("1%") }}>
더 정확한 평가를 받으실 수 있습니다
</Text>
<Image
source={require("../../images/smile.png")}
style={{ marginTop: hp("0.5%") }}
/>
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
{bodyType.map((data) => (
<>
<TouchableHighlight
style={styles.bodySelect}
value={data.bodyType}
onPress={onClick}
// onPress={() => bouncyCheckboxRef?.onPress()}
>
<>
<BouncyCheckbox
isChecked={!isSelected}
ref={(ref) => (bouncyCheckboxRef = ref)}
size={25}
fillColor="black"
unfillColor="#FFFFFF"
iconStyle={{ borderColor: "white" }}
textStyle={{ fontFamily: "JosefinSans-Regular" }}
disableBuiltInState
onPress={onClick}
style={{
alignSelf: "flex-start",
marginLeft: wp("3%"),
marginTop: hp("2%"),
}}
/>
<SvgCssUri
uri={data.imgUrl}
width="90%"
height="60%"
marginTop="-5%"
key={data.key}
/>
<Text style={styles.bodytype}>{data.bodyType}</Text>
</>
</TouchableHighlight>
</>
))}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={() => {
navigation.navigate("얼굴형 정보 입력");
}}
underlayColor="gray"
>
<>
<Text style={styles.text}>선택 완료</Text>
</>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
marginTop: hp("5%"),
},
button: {
justifyContent: "center",
alignItems: "center",
width: wp("70%"),
height: hp("7%"),
color: "white",
backgroundColor: "black",
borderRadius: 10,
marginTop: hp("17%"),
},
text: {
color: "white",
fontSize: wp("5.2%"),
fontWeight: "bold",
},
bodySelect: {
marginLeft: 16,
marginRight: 16,
width: wp("70%"),
height: hp("35%"),
alignItems: "center",
borderRadius: 30,
backgroundColor: "#ffffff",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
bodytype: {
marginTop: hp("3%"),
fontWeight: "bold",
fontSize: wp("8%"),
},
});
export default Select;

this example explain how to select individual choice.
do these steps :
//define state to save selected value inside it
const [selected, setSelected] = React.useState();
//handle item onPress
const onPress = (item) => {
setSelected(item);
}
//check if item selected
const isSelected = (item) => {
return selected?.unique_id === item.unique_id;
}
//and in render function
<ScrollView>
{
data.map((item, index) => {
return(
<ItemComponent
onPress={() => setSelected(item)}
style={isSelected(item) ? selectedStyle : defaultStyle}>
</ItemComponent>
)
})
}
</ScrollView>
full code try snack here
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, TouchableOpacity} from 'react-native';
export default function App() {
const [selected, setSelected] = React.useState();
const data = [
{
unique_id : 1,
text : "item one"
},
{
unique_id : 2,
text : "item two"
},
{
unique_id : 3,
text : "item three"
},
{
unique_id : 4,
text : "item four"
}
];
const onPress = (item) => {
setSelected(item);
}
const isSelected = (item) => {
return selected?.unique_id === item.unique_id;
}
return (
<ScrollView>
{
data.map((item, index) => {
return(
<TouchableOpacity
key={item.unique_id}
onPress={() => {
setSelected(item);
}}
style={{
padding : 25,
margin : 10,
backgroundColor : isSelected(item) ? "red" : "#eee"
}}
>
<Text>{item.text}</Text>
</TouchableOpacity>
)
})
}
</ScrollView>
);
}

Fetch function causes SQL Transient server to behave erratically

Good day,
I have had an issue recently whereby I have been running an SQL script in an app I have developed. The app uses a Transient database and has been working absolutely flawlessly for some time.
What I originally wanted to happen is that the app uses fetch process to perform a listing of a related servers contents and presents them into a Fragment (However I didn't get this far) . I was in the middle of the development of the code when the DB got a little strange.
Seemingly overnight I seem to have lost control of the database, for a reason that I cannot fathom, the database is automatically and repeatedly inserting hundreds off nulls into the db and I have no idea why. I have checked, double checked, triple checked the code and isolated code blocks that I think could be causing the problem to no avail. The only change I have made recently before the issue occurred is inserting a Fragment into the page.
The App uses an old Todo list to access the SQL server. I believe the open database code could be the problem and have moved it slightly to try and alleviate the issue
Here is my code
import React, { Fragment, useState } from 'react';
import { ScrollView, StyleSheet, Text, TextInput, Button,TouchableOpacity, View,Image, CheckBox, Alert } from 'react-native';
import Constants from 'expo-constants';
import * as SQLite from 'expo-sqlite';
import { enableProdMode } from '#angular/core';
import {fetch} from 'node-fetch';
let ref = React.createRef()
function performGetRequest(){
const db = SQLite.openDatabase('db.db')
const getPage= {
getServerPage :(
fetch('TEST SERVER CURRENTLY DOWN')
.then(res => res.text())
.then(json=> console.log(json)))
}
}
const db = SQLite.openDatabase('db.db')
const list = {
Page :(
<Fragment>
TEST
</Fragment>
)
}
function Items({ done: doneHeading, onPressItem }) {
const [items, setItems] = React.useState(null);
React.useEffect(() => {
db.transaction(tx => {
tx.executeSql(
`select * from items where done = ?;`,
[doneHeading ? 1 : 0],
(_, { rows: { _array } }) => setItems(_array)
);
});
}, []);
const heading = doneHeading ? "Completed" : "Todo";
return null;
return (
<View style={styles.sectionContainer}>
<Text style={styles.sectionHeading}>{heading}</Text>
{items.map(({ id, done, value }) => (
<TouchableOpacity
key={id}
onPress={() => onPressItem && onPressItem(id)}
style={{
backgroundColor: done ? "#000000" : "#fff",
borderColor: "#000",
borderWidth: 1,
padding: 8
}}
>
<Text style={{ color: done ? "#fff" : "#000" }}>{value}</Text>
</TouchableOpacity>
))}
</View>
);}
function App() {
const [text, setText] = React.useState(null)
const [forceUpdate, forceUpdateId] = useForceUpdate()
React.useEffect(() => {
db.transaction(tx => {
tx.executeSql(
"create table if not exists items (id integer primary key not null, done int, value text);"
);
});
}, []);
const add = (text) => {
// is text empty?
if (text === null || text === "") {
return false;
}
}
db.transaction(
tx => {
tx.executeSql("insert into items (done, value) values (0, ?)", []);
tx.executeSql("select * from items", [], (_, { rows }) =>
console.log(JSON.stringify(rows))
);
},
null,
forceUpdate
);
let ref = React.createRef();
const Home: React.FC = () => {
let cancelToken: any = axios.CancelToken;
let source = cancelToken.source();
useEffect(() => {
(async () => {
try {
const data = await axios.get("https://Kitchkar.pagekite.me/music", {
cancelToken: source.token
});
}catch (error) {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
// handle error
console.log(error);
}
}
})();
return () => {
//when the component unmounts
console.log("component unmounted");
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
}
}, []); //End UseEffect
};
return (
<View style={styles.container}>
<Text style={styles.heading}>Page Listing</Text>
<View style={styles.flexRow}>
<TextInput
onChangeText={text => setText(text)}
onSubmitEditing={() => {
add(text);
setText(null);
}}
placeholder="what do you need to do?"
style={styles.input}
value={text}
/>
</View>
<View style={{ width: 200}}>
<Button
title="Enter!"
color="gold"
width="100"
height="100"
onpress={(performGetRequest)}/>
</View>
<Text style={styles.heading}>server contents</Text>
<Text style={styles.heading}>{getPage.getServerPage}</Text>
<Text style={styles.heading}></Text>
<Items
key={`forceupdate-todo-${forceUpdateId}`}
done={false}
onPressItem={id =>
db.transaction(
tx => {
tx.executeSql(`update items set done = 1 where id = ?;`, [
id
]);
},
null,
forceUpdate
)
}
/>
<ScrollView style={styles.container}>
<Image source={require('Substitute any image here')}/>
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-start',
}}>
<View style={{width: 200, height: 200, backgroundColor: 'yellow'}} />
<View style={{width: 200, height: 200, backgroundColor: 'orange'}} />
<View style={{width: 200, height: 200, backgroundColor: 'gold'}} />
</View>
<Text style={styles.heading}>Search History</Text>
<Items
done
key={`forceupdate-done-${forceUpdateId}`}
onPressItem={id =>
db.transaction(
tx => {
tx.executeSql(`delete from items where id = ?;`, [id]);
},
null,
forceUpdate
)
}
/>
<Text style={styles.heading}>Search History</Text>
</ScrollView>
</View>
);
}
function useForceUpdate() {
const [value, setValue] = useState(0);
return [() => setValue(value + 1), value];
}
db.transaction(
tx => {
tx.executeSql("select * from items", [], (_, { rows }) =>
tx.executeSql("insert into items (done, value) values (0, ?)", [console.log(JSON.stringify(rows))]));
}
);
const styles = StyleSheet.create({
container: {
color:"#FFD700",
},
button: {
width: "200",
height:"100",
},
heading: {
color: "#FFD700",
fontSize: 20,
fontWeight: "bold",
textAlign: "center"
},
flexRow: {
flexDirection: "row"
},
input: {
color:"#FFD700",
borderColor: "#FFD700",
borderRadius: 4,
borderWidth: 1,
flex: 1,
height: 48,
margin: 16,
padding: 8
},
})
export default App;

const db = SQLite.openDatabase('db.db') should be const db = SQLite.openDatabase("db.db");

How to Implement Swipable list in react native?

I've implemented an app based on react native. This app shows me a list via swipelistview. But I have a Problem. when list add new items after scroll down, swipelistview won't work properly. In fact it works by Accident. I don't know where i've made mistake.
this is my code:
import React , {Component} from 'react';
import { StyleSheet, Text, View, FlatList ,ActivityIndicator,Animated , TouchableOpacity, Alert } from 'react-native';
import { SwipeListView } from 'react-native-swipe-list-view';
import { Container, Header, Content, Accordion ,Icon ,Item, Input , Button ,ActionSheet , Card, CardItem, Body} from "native-base";
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
class App extends Component {
constructor(props) {
super(props);
this.actionSheet = null;
}
state = {
data: [],
filteredData: [],
page: 1,
loading: false,
error: null,
spinner: false,
searchText:'',
lety:false,
refreshing: false
};
componentDidMount() {
console.disableYellowBox = true;
this.fetchData();
}
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.fetchData();
}
);
};
fetchData = () => {
const page = this.state.page;
this.setState({ loading: true });
let response = fetch(
'http://webgispro.ir/home/GetWords/' + page ,
{
method: "POST"
}
).then((response) => response.json())
.then((responseJson) => {
this.setState(
{
data : page === 1 ? Array.from(responseJson): [...this.state.data, ...responseJson] ,
loading: false,
refreshing: false
})
})
.catch((error) => {
this.setState({ error, loading: false });
});
};
searchData = (searchText) => {
this.setState({searchText: searchText.toLowerCase()});
if (searchText =='') {
this.setState({filteredData: []});
this.setState({lety:false})
return false;
}
let filteredData = this.state.data.filter(function (item) {
return item.Word.toLowerCase().includes(searchText.toLowerCase());
});
this.setState({lety : filteredData.length == 0 ? true : false})
this.setState({filteredData: filteredData});
};
renderHeader = () => {
return <Searchbar
style={{ width:'100%' }}
inputStyle={{borderWidth: 0}}
round={false}
lightTheme={true}
placeholder="Search..."
autoCapitalize='none'
autoCorrect={false}
onChangeText={this.searchData}
value={this.state.searchText}
/>
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating ={true} color="blue" style={{height: 80, marginTop: 10, opacity: 1 }} size="large" />
</View>
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE",
//marginLeft: "14%"
}}
/>
);
};
handleRefresh = () => {
this.rowHeightAnimatedValues = {};
this.setState(
{
page: 1,
refreshing: true
},
() => {
this.fetchData();
}
);
};
editItem = key => () => {
var example = this.state.data.find(o=>o.Id == key).Example
if ( this.actionSheet !== null ) {
const title = <Text style={{ color: 'black', fontSize: 23 }}>{example}</Text>
this.actionSheet._root.showActionSheet(
{
options: [] ,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title:title
}, (i) => console.log(i));
}
}
deleteItem = key => () => {
Alert.alert(
"???",
"??? ???? ??? ????? ????? ??",
[
{
text: "???",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "???", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
);
}
onRowOpen =() => {
console.log('cfdfdf')
}
render() {
return (
<View style={styles.container}>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" onChangeText={this.searchData} />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
<SwipeListView
useFlatList
extraData={this.state}
data={this.state.filteredData && this.state.filteredData.length > 0 || this.state.lety == true ? this.state.filteredData : this.state.data}
keyExtractor={item => item.Id.toString()}
renderItem={(data, rowMap) => (
<Animated.View
style={[
styles.rowFront,
data.index % 2 === 0 && { backgroundColor: 'white' },
{ height: 100 }
]}
>
<Text style={{position: 'absolute', top: 35 , fontSize:20}}>
{data.item.Word}
</Text>
</Animated.View>
)}
renderHiddenItem={ (data, rowMap) => (
<View style={styles.rowBack}>
<Text style={{fontSize:20}}>{data.item.Meaning}</Text>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft]} onPress={this.editItem(data.item.Id)}>
<Icon name='md-information-circle-outline' />
</TouchableOpacity>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={this.deleteItem(data.item.Id)}>
<Icon name='trash-outline' />
</TouchableOpacity>
</View>
)}
leftOpenValue={90}
rightOpenValue={-150}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={8}
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
/>
<ActionSheet ref={(c) => { this.actionSheet = c; }} />
</View>
);
}
}
export default App
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
//paddingTop: 50,
},
backTextWhite: {
color: '#FFF'
},
rowFront: {
alignItems: 'center',
backgroundColor: '#CCC',
justifyContent: 'center',
},
rowBack: {
alignItems: 'center',
backgroundColor: 'green',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
backRightBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
width: 75
},
backRightBtnLeft: {
backgroundColor: 'blue',
right: 75
},
backRightBtnRight: {
backgroundColor: 'red',
right: 0
},
});
The list works properly and comes data but whenever I scroll down or up it doesn't work anymore. Please help me

If you are in mindset to change your package, then you can try react-native-snap-carousel, perfect for your requirement. Thanks

React Native - Modal is showing on a different FlatList screen

I'am having trouble with modal because I have some in a "Datails screen" with Flatlist and it is working fine, actually. But the thing is, before navigating to my "Datails screen" the user will first see the "Category screen", and here is where the problem. Because I didn't type any modal at my "Category screen", but whenever I click on any button in there a modal is showing, it looks very tricky for me.
Here is my code
Details.js (this is the only screen where I want to display my modal)
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal
} from 'react-native';
export default class Details extends Component {
static navigationOptions = {
title: ''
};
constructor()
{
super ()
this.state = {
showModal: true
}
}
state = {
data: [],
refreshing: false
};
fetchData = async() => {
const { params } = this.props.navigation.state;
const response_Cat = await fetch('http://192.168.254.100:3307/categories/' + params.id);
const category_Cat = await response_Cat.json();
this.setState({data: category_Cat});
};
componentDidMount() {
this.fetchData();
};
_onRefresh() {
this.setState({ refreshing: true });
this.fetchData().then(() => {
this.setState({ refreshing: false })
});
};
render() {
const { params } = this.props.navigation.state;
return (
<View style = { styles.container }>
<FlatList
data = { this.state.data }
renderItem = {({ item }) =>
<TouchableOpacity style = { styles.buttonContainer }>
<Text style = { styles.buttonText }
onPress = { () => { this.setState({showModal:true}) } }>{ item.menu_desc } { item.menu_price }</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
/*refreshControl = {
<RefreshControl
refreshing = { this.state.refreshing }
onRefresh = { this._onRefresh.bind(this) }
/>
}*/
/>
<View>
<Modal
onRequestClose={() => console.warn('no warning')}
visible={this.state.showModal}
>
<TouchableOpacity style = { styles.buttonContainer }>
<Text style = { styles.buttonText }
onPress = { () => { this.setState({ showModal:false }) } }>Hello</Text>
</TouchableOpacity>
</Modal>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
pageName:{
margin:10,fontWeight:'bold',
color:'#000', textAlign:'center'
},
productBox:{
padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
},
price:{
padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
},
proName:{
padding:5,color:'blue',textAlign:'center'
},
buttonContainer: {
backgroundColor: '#f7c744',
paddingVertical: 10,
borderRadius: 30,
marginBottom: 10,
},
buttonText: {
textAlign: "center",
color: 'rgb(32, 53, 70)',
fontWeight: 'bold',
fontSize: 18
},
modalView: {
backgroundColor: "#aaa",
height: 150,
justifyContent: 'center',
alignItems: 'center'
},
closeText: {
backgroundColor: '#333',
color: '#bbb',
padding: 5,
margin: 20
}
})
//AppRegistry.registerComponent('Details', () => Details);
categories.js (this is the page where I don't type any modal code, I guess)
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl
} from 'react-native';
export default class Categories extends Component {
state = {
data: [],
refreshing: false
};
fetchData = async() => {
const { params } = this.props.navigation.state;
const response_Cat = await fetch('http://192.168.254.100:3307/categories/');
const category_Cat = await response_Cat.json();
this.setState({data: category_Cat});
};
componentDidMount() {
this.fetchData();
};
_onRefresh() {
this.setState({ refreshing: true });
this.fetchData().then(() => {
this.setState({ refreshing: false })
});
}
render() {
const { params } = this.props.navigation.state;
return (
<View style = { styles.container }>
<FlatList
data = { this.state.data }
renderItem = {({ item }) =>
<TouchableOpacity style = {styles.buttonContainer}>
<Text style = {styles.buttonText}
onPress = { () => this.props.navigation.navigate('Details', { id: item.cat_id }) }>{ item.cat_name }</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
refreshControl = {
<RefreshControl
refreshing = { this.state.refreshing }
onRefresh = { this._onRefresh.bind(this) }
/>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
pageName:{
margin:10,fontWeight:'bold',
color:'#000', textAlign:'center'
},
productBox:{
padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
},
price:{
padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
},
proName:{
padding:5,color:'blue',textAlign:'center'
},
buttonContainer: {
backgroundColor: '#f7c744',
paddingVertical: 10,
borderRadius: 30,
marginBottom: 10,
},
buttonText: {
textAlign: "center",
color: 'rgb(32, 53, 70)',
fontWeight: 'bold',
fontSize: 18
},
})
AppRegistry.registerComponent('Categories', () => Categories);

In your details.js you kept showModal: true in constructor itself.
Change it to false, and make it true whenever you want to show a modal.
I guess you should make it true after you have successfully fetched data. i.e keep it in fetchData()
this.setState({data: category_Cat, showModal:true});