FlatList doesn't render on Android - react-native

Question

I've been dealing with the problem mentioned below for a few days ... My problem is with ReactNative FlatList. I use Expo and instead of using simulation I use real devices (Iphone 11 and Xiaomi Redmi Note7).
With the code below, FlatList renders smoothly on Iphone 11, while it enters an endless loop on mobile phones with Android operating systems such as Xiaomi and Samsung. View under RenderItem function comes but its content is not available.
Also, although there are three objects under state.data(checked with console.log), FlatView is rendered infinitely.
Has anyone encountered this situation before? How can I resolve this situation?
Thanks in advance.
Here is my code;
/*
Lights
Ahmet BOZ
21.11.2020
*/
import React, {Component} from 'react';
import { StyleSheet, Text, View, ScrollView, Button, TouchableOpacity, FlatList } from 'react-native';
import Warning from "../components/Warning";
import Logo from "../components/Logo";
import Light from '../components/Light';
import axios from 'axios';
import Loading from '../components/Loading';
export default class Lights extends Component {
state = {
loading: true,
data:[]
}
setAllLights = async () => {
const {data : data} = await axios.get('http://API_URL')
this.setState({
data,
loading: false
})
}
componentDidMount(){
this.setAllLights();
}
renderLights = ({item, index}) => {
return(
<TouchableOpacity
onPress={() => this.props.navigation.navigate('LightDetail', { lightid: item.light_id,})}
style={styles.svLight}>
<Text style={{color:'#ffca3a'}}>{item.light_name}</Text>
</TouchableOpacity>
)
}
render() {
const {lightName, lightId} = this.state;
return (
<View style={styles.LightsWrapper}>
{this.state.loading && <Loading />}
<View style={styles.main}>
<View style={styles.svInformation}><Text style={{color:'#efefef'}}>All lights sorted by alphabetical</Text></View>
<FlatList style={styles.sv}
renderItem={this.renderLights}
numColumns={3}
keyExtractor={item => item.light_id}
data = {this.state.data}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
LightsWrapper: {
flex:1,
},
main: {
flex:1,
backgroundColor:'#1b263b',
},
svInformation: {
justifyContent:'center',
alignItems:'center',
backgroundColor:'brown',
paddingVertical:5,
marginBottom:5,
},
svRow: {
paddingVertical:3,
flexDirection:'row',
justifyContent:'space-between',
},
svLight:{
flex:1,
borderColor:'#fff',
justifyContent:'center',
alignItems:'center',
paddingVertical:20,
borderWidth:1,
borderColor:'#ffca3a',
flexDirection:'row',
borderRadius:3,
marginBottom:2,
}
});