react-native

How to know the state of scroll (up or down) in FlatList?

≡放荡痞女 提交于 2021-02-18 19:44:55
问题 How to know the state of the scroll in FlatList? Like scrolling up or scrolling down? I want to know the state scrolling up or down to show or hide header in FlatList. 回答1: Use the onScroll property as below. (Official) <ScrollView onScroll={this._onScroll} /> _onScroll = (event) { console.log(event.nativeEvent.contentOffset.y); }, And for guarantee getting the value of scrolling's last frame, you need to set a property scrollEventThrottle={16} . 回答2: Actually, the FlatList component can use

Hide and Show View With Animation in React Native v0.46.

无人久伴 提交于 2021-02-18 17:00:57
问题 Friends, I have issue to hide and show view in react native. I have do the folloing code. Want to hide and show view with animation. Please help me. Code : import React, { Component } from "react"; import { AppRegistry, Image, View, Text, Button, StyleSheet, TouchableHighlight, } from "react-native"; import { StackNavigator } from "react-navigation"; import SignUpScreen from "./SignUp"; import AddManagerScreen from "./AddManager"; class SplashScreen extends Component { constructor(props) {

How to pass props from FlatList item to Modal?

橙三吉。 提交于 2021-02-18 15:24:30
问题 I have implemented a View component containing a FlatList, which renders TouchableHighlights. Also I have implemented a Modal component, which I'd like to import at various places including the component that renders the FlatList. I have already managed to open the modal from outside (via handing over a prop for visibility, accessing it via nextProps and setting modals state value "modalVisible" to this) and closing it from inside (simply via changing it's state value "modalVisible"). BUT: I

Async useState leading to undefined element down the hierarchy

会有一股神秘感。 提交于 2021-02-18 14:52:56
问题 Setup/Scenario I am using twitter api to fetch data and rendering it in twitter card using react-native-socials. The tweet data ( JSON ) is stored and served through my backend and rendered in the app. I am using a Flatlist to render this data. Problem It's working fine for the first 3 loads, I am using pullToRefresh in flatlist to do a network call to get new data. But when I try the 4th time it gets an undefined element. I've replaced the Twitter element ( from react-native-socials lib )

Async useState leading to undefined element down the hierarchy

可紊 提交于 2021-02-18 14:50:22
问题 Setup/Scenario I am using twitter api to fetch data and rendering it in twitter card using react-native-socials. The tweet data ( JSON ) is stored and served through my backend and rendered in the app. I am using a Flatlist to render this data. Problem It's working fine for the first 3 loads, I am using pullToRefresh in flatlist to do a network call to get new data. But when I try the 4th time it gets an undefined element. I've replaced the Twitter element ( from react-native-socials lib )

Async useState leading to undefined element down the hierarchy

可紊 提交于 2021-02-18 14:49:28
问题 Setup/Scenario I am using twitter api to fetch data and rendering it in twitter card using react-native-socials. The tweet data ( JSON ) is stored and served through my backend and rendered in the app. I am using a Flatlist to render this data. Problem It's working fine for the first 3 loads, I am using pullToRefresh in flatlist to do a network call to get new data. But when I try the 4th time it gets an undefined element. I've replaced the Twitter element ( from react-native-socials lib )

Couldn't find a 'component' or 'children' prop for the screen 'Home'. This can happen if you passed 'undefined'. Error with react-navigate v5?

亡梦爱人 提交于 2021-02-18 11:47:14
问题 I'm trying to use react-navigate v5 to setup a stacknavigator for four screens. Currently I'm getting this error while trying to run the app: My App.js: import React from 'react'; import SafeAreaView from 'react-native-safe-area-view'; import MainStackNavigator from './navigation/Navigator'; import {LocalizationProvider} from './utils/localization/LocalizationContext'; import { NavigationContainer } from '@react-navigation/native'; const App: () => React$Node = () => { return (

React native navigation v5 tab press not working

让人想犯罪 __ 提交于 2021-02-18 11:45:11
问题 As seen on the code, tabPress is not called, am i doing it wrong or am i missing something, unfortunately i have not found any code samples for react navigation version 5. <Tab.Navigator labeled={false} barStyle={{backgroundColor: '#ffffff', height: 55}} options={{ tabPress: ({navigation}) => { console.log('nav tab press triggered') } }}> <Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{ tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather

React native check if tablet or screen in inches

霸气de小男生 提交于 2021-02-18 11:45:10
问题 I've established a different render logic for tablets and mobile devices. I was wondering if there is a way to get the screen size in inches or maybe even any module to automatically detect if the device is a tablet or not . The reason I am not using the dimensions api directly to get the screen resolution is that there are many android tablets with lower resolution than many of their mobile counterparts. Thanks. 回答1: Based on @martinarroyo's answer, a way to go about it use the react-native

Re-render component when navigating the stack with React Navigation

落花浮王杯 提交于 2021-02-18 10:19:14
问题 I am currently using react-navigation to do stack- and tab- navigation. Is it possible to re-render a component every time the user navigates to specific screens? I want to make sure to rerun the componentDidMount() every time a specific screen is reached, so I get the latest data from the server by calling the appropriate action creator. What strategies should I be looking at? I am pretty sure this is a common design pattern but I failed to see documented examples. 回答1: React Navigation