I have an Expo standalone app and I am sending push notifications from my server. I have a notification listener in my App.js componentDidMount like so.

componentDidMount = () => {  this._notificationSubscription = Notifications.addListener(this._handleNotification);}

The handler gets called when my app is running in foreground or background.

However, when my app is not running (not even in background) and the notification is delivered, on tapping the notification the app opens but the handler is not called.

It seems to me that the listener registration is "too late".

My notification has useful payload that I want to use in the app but unless the app is running it is lost in this "cold start" case. Is there a way to preserve this notification data on cold start and call this listener?

I am learning react-native, trying to create some demo apps just for learning. I want to set fontFamily to roboto thin of my toolbar title.

I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running

react-native start

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\generated\source\r\debug\android\support\v7\appcompat'{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\generated\source\r\debug\android\support\v7\appcompat'    at Error (native)

When I am removing the font then it is working fine.I am unable to fix this issue, can anyone help me what can be the reason for this.

Thanks in advance.

Currently we are using expo camera, we have to use our own buttons to take picture. I already saw android applications that were using my built in camera application. Is it possible to achieve that in react native with expo ?

~/Desktop/saman/my-practice/DoneWithIt  master ● expo startERROR: Node.js v13.0.1 is no longer supported.

expo-cli supports following Node.js versions:

• =10.13.0 <11.0.0 (Maintenance LTS)

• =12.13.0 <13.0.0 (Active LTS)

• =14.0.0 <15.0.0 (Current Release)

While developing a RN mobile app, what are the best practices to style the components

1. Regarding alignments, how to use width and height (unitless or in percentages)?
2. Image resolutions
3. Pls Suggest any library (react-native-paper, nativebase.io, react native elements etc.) or how should i use rn components
4. how to give best UI in all screen resolution (android, iPad, etc. resolutions)Pls give ur valuable suggestion in these and thanks in advance.

I am trying to develop a strategy for securing third party API keys for a React Native app. When building a web application, API keys can be stored in environment variables and then secured when deploying the application server.

However with a mobile app that only uses 'back end as a service' back end services, like Firebase, the app is not deployed, it is distributed and services are accessed.

After doing some research, it seems there is no standard / straight forward approach to solving this problem although it must be a situation that thousands of app developers find themselves in.

I am using Firebase, but also two other services that require API keys. My initial solution was to add these API keys (not Firebase keys) to Firebase environment variables as described here and then make a call in the app to a Firebase Cloud Function and to retrieve them. But I think the problem might be here that the keys can still be intercepted as they will be retrieved in plain text.

Is this a good approach to storing the third party keys, and if not, what other approaches could be taken?

I'm working on react native project and I'm using a service as native code :

public class SdlService extends Service implements LocationListener {}

I want to get the current access token for the current user , my steps :

1. send event from the SdlService class to react native :

   private void sendEvent(String eventName, @Nullable WritableMap params) {MainApplication application = (MainApplication) this.getApplication();ReactNativeHost reactNativeHost = application.getReactNativeHost();ReactInstanceManager reactInstanceManager = reactNativeHost.getReactInstanceManager();ReactContext reactContext = reactInstanceManager.getCurrentReactContext();reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);

   }

2. take the current access token using AWS Cognito in java script code below :

    const onEventHandler= (event) => {//Refresh TokenAuth.currentAuthenticatedUser().then(user => {  const userAccessToken = user.signInUserSession.idToken.jwtToken;

   });};

now I want to send this token to the SdlService Class , any help?

I am building a e-commerce mobile app for android. The user will be shown a list of products of a particular category. The product count will be in hundreds. And there are multiple categories in the app. I feel it is not optimized fetching all the products at once for each category. The customer might not even scroll through all the products.
I want to do something like this :
Fetch initial few products(say 10), then based on the scrolling fetch another 10 and so on
How do I implement it in the frontend and backend ? My products for each category are stored in one array in db. One way I can think of is fetch based on index (from frontend) and pass products back to frontend. Is there any better way of doing this ?
I am using react native to build the frontend and node.js with express for backend.

I have a React Native application and I'm seeking to add functionality that checks if there is an active internet connection when the app first starts up, and continuously thereafter.

If there is no internet connection, I'm seeking to display a message saying "Internet connection not detected" with a button to "Try again"; if there is an internet connection, I'm seeking to load a page (WebView).

I'm also seeking to support both iOS and Android devices; I've researched this independently and have found a couple libraries on GitHub. However, many require an extra step of including a permissions addition in Android Manifest XML, however I don't see an Android Manifest XML file in my app; why does only Android need a manifest?

Any help is appreciated; thanks and take care.

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and react-native-keyboard-aware-scroll-view v 0.2.1.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';class LoginIOS extends Component{  constructor(props) {    super(props);    this.login = this.login.bind(this);    this.renderScene = this.renderScene.bind(this);    this.state={      username: '',      password: ''    };  }  render() {    return (<Navigator          renderScene={this.renderScene}          navigator={this.props.navigator}          navigationBar={<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}                routeMapper={NavigationBarRouteMapper} />          } />    );  }  renderScene() {    return (<KeyboardAwareScrollView><View style={styles.container}><Spinner visible={this.state.visible} /><StatusBar barStyle="light-content" hidden={true}/><View style={styles.topContainer}><View style={styles.bannerContainer}><View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}><Image style={styles.mark} source={require('***')} /></View></View><View style={styles.credentialContainer}><View style={styles.inputContainer}><Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" /><View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><TextInput                            style={styles.input}                            placeholder="Username"                            autoCorrect={false}                            autoCapitalize="none"                            returnKeyType="next"                            placeholderTextColor="#e0e0e0"                            onChangeText={(text) => this.setState({username: text})}                            value={this.state.username}></TextInput></View></View><View style={styles.inputContainer}><Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" /><View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><TextInput                            style={styles.input}                            placeholder="Password"                            returnKeyType="done"                            autoCorrect={false}                            secureTextEntry={true}                            placeholderTextColor="#e0e0e0"                            onChangeText={(text) => this.setState({password: text})}                            value={this.state.password}                            onSubmitEditing={(event)=> {                              this.login();                            }}></TextInput></View></View><TouchableOpacity style={styles.forgotContainer}></TouchableOpacity></View></View><TouchableHighlight          underlayColor="#D6AB00"          onPress={this.login}          style={styles.signInButtonContainer}><Text style={styles.signInText}>Sign In</Text></TouchableHighlight></View></KeyboardAwareScrollView>    );  }

Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

When I run react-native run-android I'm getting this error ;enter image description here

I have problem with my react-native app! I have gotten next error message ->enter image description here

But I'm using WebView correctly! Why is it happening?

**import { WebView } from 'react-native-webview';**const source = {    html: `<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"></head><body><p id="mainText" style="position: fixed; top: 0; left: 0; width: 100%; text-align: justify; padding-bottom: 30px; color: #fff; font-size: 16px;                 font-family: Arial, sans-serif; background-color: transparent;">                    ${this.props.children}</p></body></html>    `,}

...

<WebView     ref={r => (this.webref = r)}     javaScriptEnabled={true}     onLoadEnd={() => this.webref.injectJavaScript(this.state.script)}     showsVerticalScrollIndicator={false}     onMessage={event => {         this.setState({             height: event.nativeEvent.data         })     }}     source={source}     useWebKit={true}/>

package.json:

"dependencies": {"@dooboo-ui/native-switch-toggle": "^0.7.0","@haskkor/react-native-pincode": "git+https://git@github.com/trustee-wallet/react-native-pincode","@react-native-community/async-storage": "^1.7.1","@react-native-community/blur": "^3.4.1","@react-native-community/masked-view": "^0.1.5","@react-native-community/netinfo": "4.1.3","@tradle/react-native-http": "^2.0.1","assert": "^1.5.0","axios": "^0.19.0","babel-preset-react-native": "4.0.1","babel-preset-stage-2": "6.24.1","bip21": "^2.0.3","bip32": "^2.0.5","bip39": "^3.0.2","bip44-constants": "^8.0.23","bitcoinjs-lib": "^5.1.10","bn.js": "^5.1.2","browserify-zlib": "^0.2.0","buffer": "^5.4.3","card-validator": "^6.2.0","console-browserify": "^1.2.0","constants-browserify": "^1.0.0","cipher-base": "^1.0.4","dns.js": "^1.0.1","domain-browser": "^1.2.0","eslint-config-prettier": "^6.11.0","eslint-config-standard": "^14.1.1","eth-lib": "^0.1.29","eth-url-parser": "^1.0.3","ethereumjs-util": "^7.0.2","ethjs-provider-http": "^0.1.6","ethjs-query": "^0.3.8","events": "^3.1.0","fast-luhn": "^1.1.1","https-browserify": "0.0.1","i18n-js": "^3.5.1","inherits": "^2.0.1","jetifier": "^1.6.5","lodash": "^4.17.15","lottie-ios": "3.1.3","lottie-react-native": "^3.3.2","md5": "^2.2.1","metro-config": "^0.59.0","moment": "^2.24.0","node-libs-browser": "^2.2.1","path-browserify": "0.0.0","process": "^0.11.10","punycode": "^2.1.1","querystring-es3": "^0.2.1","react": "16.9.0","react-native": "0.61.5","react-native-awesome-card-io": "^0.8.2","react-native-background-fetch": "^3.0.3","react-native-background-timer": "^2.1.1","react-native-blocksoft-random": "git+https://git@github.com/trustee-wallet/react-native-blocksoft-random","react-native-bip39": "^2.3.0","react-native-blur-overlay": "^1.0.7","react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git","react-native-crypto": "git+https://github.com/trustee-wallet/react-native-crypto","react-native-dash": "0.0.11","react-native-device-info": "^5.5.4","react-native-error-boundary": "^1.1.0","react-native-exception-handler": "^2.10.8","react-native-exit-app": "^1.1.0","react-native-fbsdk": "^1.1.2","react-native-firebase": "5.6.0","react-native-fs": "^2.16.2","react-native-flurry-sdk": "5.5.0","react-native-gesture-handler": "^1.6.1","react-native-image-picker": "^2.3.1","react-native-image-resizer": "^1.2.1","react-native-indicators": "^0.17.0","react-native-keyboard-aware-view": "0.0.14","react-native-keychain": "^6.1.1","react-native-level-fs": "^3.0.1","react-native-linear-gradient": "^2.5.6","react-native-localize": "^1.3.2","react-native-masked-text": "^1.13.0","react-native-material-textfield": "0.12.0","react-native-modal": "^11.5.3","react-native-navigation-bar-color": "^2.0.1","react-native-orientation": "3.1.3","react-native-orientation-loading-overlay": "^0.1.6","react-native-os": "^1.2.6","react-native-paper": "^3.4.0","react-native-permissions": "^2.0.9","react-native-phone-input": "^0.2.4","react-native-qrcode-scanner": "^1.3.1","react-native-picker-select": "^7.0.0","react-native-popup-menu": "^0.15.7","react-native-progress-circle": "^2.1.0","react-native-qrcode-svg": "^6.0.1","react-native-qrcode-transparent": "^0.2.6","react-native-randombytes": "^3.5.3","react-native-reanimated": "^1.4.0","react-native-root-toast": "^3.2.0","react-native-safe-area-context": "^0.6.2","react-native-safe-area-view": "^1.0.0","react-native-screens": "^2.0.0-alpha.22","react-native-shadow": "^1.2.2","react-native-share": "^3.3.3","react-native-snap-carousel": "^3.8.4","react-native-snow": "^0.2.0","react-native-sqlite-helper": "1.1.0","react-native-sqlite-storage": "^5.0.0","react-native-svg": "^12.1.0","react-native-svg-transformer": "^0.14.3","react-native-swipeable": "^0.6.0","react-native-tab-view": "^2.11.0","react-native-tcp": "^4.0.0","react-native-udp": "^3.1.0","react-native-vector-icons": "^6.6.0","react-native-version-check": "^3.4.0","react-native-walkthrough-tooltip": "^1.1.7","react-native-webview": "^8.0.2","react-native-wheel-picker": "git+https://git@github.com/trustee-wallet/react-native-wheel-picker","react-native-wheel-picker-android": "^2.0.5","react-navigation": "4.0.10","react-navigation-stack": "1.10.3","react-navigation-material-bottom-tabs": "^2.2.12","react-redux": "^7.1.3","readable-stream": "^1.0.33","redux": "^4.0.5","redux-thunk": "^2.3.0","ripple-lib": "^1.6.0","rn-tooltip": "^2.0.0","safe-event-emitter": "^1.0.1","stream-browserify": "^1.0.0","string_decoder": "^1.3.0","timers-browserify": "^2.0.11","tty-browserify": "0.0.0","url": "^0.10.3","util": "^0.10.4","vm-browserify": "0.0.4","web3": "1.2.7" },"devDependencies": {"@babel/core": "7.7.7","@babel/runtime": "7.7.7","@react-native-community/eslint-config": "0.0.5","@types/jest": "^25.1.4","@types/react": "^16.9.31","@types/react-native": "^0.62.1","@types/react-redux": "^7.1.7","@types/react-test-renderer": "^16.9.2","@typescript-eslint/eslint-plugin": "^2.28.0","babel-eslint": "^10.1.0","babel-cli": "^6.26.0","babel-jest": "24.9.0","babel-preset-es2015": "6.24.1","eslint": "^6.8.0","eslint-config-prettier": "^6.9.0","eslint-config-standard": "^14.1.0","eslint-plugin-import": "^2.20.0","eslint-plugin-node": "^11.0.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-sql": "^1.1.1","eslint-plugin-standard": "^4.0.1","jest": "24.9.0","metro-react-native-babel-preset": "0.56.3","react-test-renderer": "16.9.0","rn-nodeify": "github:tradle/rn-nodeify","typescript": "^3.8.3" }

Maybe some another module uses old version WebView? I don't understand, I tried everything!((I'll be thankful for any advice!!Can someone help me?

This is a react native based application.Following is the code of file named 'NotificationScreen.js'.I want to add the Image sharing option in this code.When I run this app on my device, I see an Image on the Notification screen. I have been told to add a share to the WhatsApp option for that image.I am an absolute beginner. Please don't judge.

import React, {Component} from 'react';import Accordion from 'react-native-collapsible/Accordion';import {colors, fonts} from '../../styles';import {  StyleSheet,  View,  Text,  ImageBackground,  ScrollView,  Image,} from 'react-native'; import Share from "react-native-share";import {getSectionData} from '../CloudMessaging/CloudMessaging';import LinearGradient from 'react-native-linear-gradient';import Unorderedlist from 'react-native-unordered-list';import Icon from 'react-native-vector-icons/AntDesign';const styles = StyleSheet.create({  container: {    backgroundColor: 'white',    //flex: 1,    //alignItems: 'center',    //justifyContent: 'space-around',  },  bgImage: {    flex: 1,    width: 395,    paddingHorizontal: -20,  },  section: {    flex: 1,    paddingHorizontal: 20,  },  sectionLarge: {    flex: 2,    justifyContent: 'space-around',  },  sectionHeader: {    marginBottom: 8,  },  priceContainer: {    alignItems: 'center',  },  description: {    padding: 15,    lineHeight: 25,  },  titleDescription: {    color: '#19e7f7',    textAlign: 'center',    fontFamily: fonts.primaryRegular,    fontSize: 15,  },  title: {    marginTop: 30,  },  tabBarItemContainer: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',    borderBottomWidth: 2,    borderBottomColor: colors.white,    paddingHorizontal: 10,  },  tabBarIcon: {    width: 23,    height: 23,  },  tabBarIconFocused: {    tintColor: colors.primary,  },  headerContainer: {    height: 70,    alignItems: 'center',    justifyContent: 'flex-end',    paddingBottom: 10,  },  headerImage: {    position: 'absolute',    top: 0,    left: 0,    right: 0,    bottom: 0,    height: 70,    resizeMode: 'cover',  },  headerText: {    fontFamily: fonts.primaryBold,    color: 'rgb(239, 103, 86)',    fontSize: 15,    padding: 10,    lineHeight: 30,  },  content: {    fontFamily: fonts.primaryBold,    color: 'rgb(239, 103, 86)',    fontSize: 15,    padding: 10,    lineHeight: 30,    marginLeft: 15,  },});export default class Collapsible extends React.Component {  state = {    activeSections: [],    sectionData: [],    loaded: false,  };  componentWillMount(): void {    console.log('inside component Did Mount of Collapsible');    getSectionData().then(secData => {      console.log('constructor secData: '+ secData);      this.setState({loaded: true});      this.setState({sectionData: secData.reverse()});      return secData;    });  }  _renderSectionTitle = section => {    console.log('rendering section  title');    return (<View style={styles.content}><Text>{section.body}</Text></View>    );  };  _renderHeader(section, index, isActive, sections) {    let unicodeType = isActive ? '0x2043' : '0x2023';    return (<LinearGradient        colors={['rgb(37, 44, 59)', 'rgb(37, 44, 59)']}        style={{          marginTop: 10,          marginLeft: 30,          marginRight: 30,          backgroundColor: 'white',          borderRadius: 10,          borderWidth: 1,          borderColor: 'lightgrey',        }}><Unorderedlist bulletUnicode={unicodeType} color="rgb(239, 103, 86)"><Text style={styles.headerText}>{section.title}</Text></Unorderedlist></LinearGradient>    );  }  _renderContent(section, i, isActive, sections) {    if (section.hasOwnProperty('picture')) {      console.log('inside if part');      return (<LinearGradient colors={['white', colors.white]}><Text style={styles.content}>{section.body}</Text><Image            source={{uri: section.picture}}            style={{width: 388, height: 200, marginLeft: 3}}          /></LinearGradient>      );    } else {      return (<LinearGradient colors={['white', colors.white]}><Text style={styles.content}>{section.body}</Text></LinearGradient>      );    }  }  render() {    if (!this.state.loaded) {      return <Text> Loading ... </Text>;    }    if (this.state.sectionData.length == 0 && this.state.loaded) {      return <Text>No Messages</Text>;    } else {      console.log('Render state : '+ JSON.stringify(this.state.sectionData));      return (<ScrollView style={styles.container}><Accordion            sections={this.state.sectionData}            activeSections={this.state.activeSections}            //renderSectionTitle={this._renderSectionTitle}            renderHeader={this._renderHeader}            renderContent={this._renderContent}            onChange={this._updateSections}          /></ScrollView>      );    }  }}

I have not been able to solve an issue related to infinite loops with React Hooks and Redux in useEffect.I have read many articles about useEffect (https://overreacted.io/a-complete-guide-to-useeffect/, https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies, https://www.robinwieruch.de/react-hooks-fetch-data) and haven't still been able to avoid this infinite loop.

I do have a an app with 2 Tabs, one of them is a list of transports and the other is a summary of the active transport.The idea is to have a List of transports that can be booked, and whenever it is done, update the active transport in the other tab.The cycle of the app should be something like:

• Log in App -> No active transport. (Dispatch an action to fetch data).
• Click on List of Transports Tab (Dispatch an action to fetch list of transports).
• Book a transport (Dispatch an action to update the active transport with the one selected)
• Click on Active transport Tab and see the information of the transport.

The idea behind is that whenever the state of the active transport is updated, the Active transport Screen must be re-render because it is a dependency in useEffect, but what it does is trigger an infinite loop.

I understand why. In order to fetch the active transport from the database, I have the typical sequence of dispatches (Request, Success, Error) that change the state of the dependency. And this trigger the infinite loop because everytime the state is changing, the screen is re-rendered and I have the same problem with the list of transports.

Even knowing that, I am still not able to know how to solve it.

The active screen Im using is the next one:

ActiveTransport Screen:

export default function ActiveTransportScreen() {const dispatch = useDispatch();const isLoading = useSelector(state => state.activeTransport.isLoading);const transport = useSelector(state => state.activeTransport.transport);useEffect(() => {    dispatch(activeTransportActions.getActiveTransport());}, [transport]);if (isLoading) {    return (<View style={styles.container}><Text>Cargando</Text></View>    )}if (!transport) {    return (<View style={styles.container}><Text>No hay ningun transporte activo</Text></View>    )}return (<View style={styles.container}><View style={styles.item}><Text>Lugar de retirada: {transport.removalPlace} </Text></View><View style={styles.containerButtons}/><TouchableHighlight            style={{...styles.openButton, backgroundColor: "#2196F3"}}            onPress={() => {            }}><Text style={modalStyles.textStyle}>Completar hito</Text></TouchableHighlight><TouchableHighlight            style={{...styles.openButton, backgroundColor: "#2196F3"}}            onPress={() => {                dispatch(activeTransportActions.cancelTransport());            }}><Text style={modalStyles.textStyle}>Cancelar</Text></TouchableHighlight></View>);

}

The idea behind is being able to re-render the ActiveScreen everytime the active transport state is updated. And this can be done from the list of transports.

export default function TransportList() {const dispatch = useDispatch();const isLoading = useSelector(state => state.transportList.isLoading);const transportsTablesList = useSelector(state => state.transportList.transports);const isRefreshing = useSelector(state => state.transportList.isRefreshing);const modalVisible = useSelector(state => state.modalTransportReducer.modalVisible);const userActiveTransportId = useSelector(state => state.activeTransport.id);const onRefresh = React.useCallback(() => {    dispatch(transportActions.refreshTransportList());}, []);useEffect( () => {    dispatch(transportActions.getAll());}, [transportsTablesList ]);if (isLoading) {    return (<View style={styles.container}><Text>Cargando</Text></View>    )}if (modalVisible) {    return (<ModalTransport/>    );}if(userActiveTransportId){    return (<View style={styles.container}><Text>¡Ya tienes un transporte activo!</Text></View>    )}return (<View style={styles.container}><ScrollView horizontal={true}                    refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh}/>}><FlatList                data={transportsTablesList}                ListHeaderComponent={HeaderListTransport}                keyExtractor={(item) => item.id.toString()}                renderItem={({item}) => (RowListTransport(item))}            /></ScrollView></View>);

}

    const initialState =    {        isLoading: false,        id: null,        transport: null,        accomplishment: null,        state: null,        isRefreshing: false    };export function activeTransport(state = initialState, action) {    switch (action.type) {        case activeTransportConstants.BOOK_TRANSPORT_REQUEST:            return {                ...state,                isLoading: true            };        case activeTransportConstants.BOOK_TRANSPORT_SUCCESS:            return {                ...state,                isLoading: false,                transport: action.transport            };        case activeTransportConstants.BOOK_TRANSPORT_ERROR:            return {                ...state,                isLoading: false,                transport: null            };        case activeTransportConstants.GET_ACTIVE_TRANSPORT_REQUEST:            return {                ...state,                isLoading: true,            };        case activeTransportConstants.GET_ACTIVE_TRANSPORT_SUCCESS:            return {                ...state,                isLoading: false,                id: action.payload.id,                transport: action.payload.transport            };        case activeTransportConstants.GET_ACTIVE_TRANSPORT_ERROR:            return {                ...state,                isLoading: false,                id: null,                transport: null            }

Everytime the user book a transport, the tab ActiveTransport should be re-rendered with the information of the new transport.

I don't know exactly what should I do. I understand that transport is the only dependency in useEffect, and this must be re-rendered everytime changes, but I don't know how to isolate the sequence of request, success, error that change the state everytime.I just select the transport from the state, not the other parts.

I have tried with useCallback and useMemo but still have the same problem.

What should I do?

I hope you can help me.

Thank you very much.

I have built an android app using fingerprint authentication in Android Studio. I need to build the same thing but using React Native for android and iOS. How to go for it?

i know this is a common problem but the error i am seeing is different here's the error

06-13 15:37:51.081  1690  3926 I ActivityManager: START u0 {act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x10200000 cmp=com.lawyr/.MainActivity bnds=[849,682][1056,960] (has extras)} from uid 10020 on display 006-13 15:37:51.137  1690  1782 I ActivityManager: Start proc 13071:com.lawyr/u0a88 for activity com.lawyr/.MainActivity06-13 15:37:51.285 13071 13071 D SoLoader: adding application source: com.facebook.soloader.DirectorySoSource[root = /data/app/com.lawyr-1/lib/x86 flags = 0]06-13 15:37:51.290 13071 13071 D SoLoader: adding backup source from : com.facebook.soloader.ApkSoSource[root = /data/data/com.lawyr/lib-main flags = 1]06-13 15:37:51.293 13071 13071 D SoLoader: Preparing SO source: com.facebook.soloader.DirectorySoSource[root = /data/app/com.lawyr-1/lib/x86 flags = 0]06-13 15:37:51.294 13071 13071 D SoLoader: Preparing SO source: com.facebook.soloader.ApkSoSource[root = /data/data/com.lawyr/lib-main flags = 1]06-13 15:37:51.297 13071 13071 V fb-UnpackingSoSource: locked dso store /data/user/0/com.lawyr/lib-main06-13 15:37:51.299 13071 13071 I fb-UnpackingSoSource: dso store is up-to-date: /data/user/0/com.lawyr/lib-main06-13 15:37:51.299 13071 13071 V fb-UnpackingSoSource: releasing dso store lock for /data/user/0/com.lawyr/lib-main06-13 15:37:51.337 13071 13071 E EmbeddedLoader:    at com.lawyr.MainApplication.onCreate(MainApplication.java:86)06-13 15:37:51.338 13071 13071 E AndroidRuntime: Process: com.lawyr, PID: 1307106-13 15:37:51.338 13071 13071 E AndroidRuntime:    at com.lawyr.MainApplication.onCreate(MainApplication.java:86)06-13 15:37:51.340  1690  2045 W ActivityManager:   Force finishing activity com.lawyr/.MainActivity06-13 15:37:51.850  1690  1703 W ActivityManager: Activity pause timeout for ActivityRecord{30dba1e u0 com.lawyr/.MainActivity t51 f}06-13 15:37:51.853  1690  1703 I WindowManager: Failed to capture screenshot of Token{cc192ff ActivityRecord{30dba1e u0 com.lawyr/.MainActivity t51 f}} appWin=Window{ad21564 u0 Starting com.lawyr} drawState=4

MainActivity.java

package com.lawyr;import com.facebook.react.ReactActivity;import com.facebook.react.ReactActivityDelegate;import com.facebook.react.ReactRootView;import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;public class MainActivity extends ReactActivity {    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */    @Override    protected String getMainComponentName() {        return "main";    }    @Override    protected ReactActivityDelegate createReactActivityDelegate() {        return new ReactActivityDelegate(this, getMainComponentName()) {            @Override            protected ReactRootView createRootView() {                return new RNGestureHandlerEnabledRootView(MainActivity.this);            }        };    }}

MainApplication.java

package com.lawyr;import android.app.Application;import android.content.Context;import android.net.Uri;import com.facebook.react.PackageList;import com.facebook.react.ReactApplication;import com.oblador.vectoricons.VectorIconsPackage;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import com.lawyr.generated.BasePackageList;import org.unimodules.adapters.react.ReactAdapterPackage;import org.unimodules.adapters.react.ModuleRegistryAdapter;import org.unimodules.adapters.react.ReactModuleRegistryProvider;import org.unimodules.core.interfaces.Package;import org.unimodules.core.interfaces.SingletonModule;import expo.modules.constants.ConstantsPackage;import expo.modules.permissions.PermissionsPackage;import expo.modules.filesystem.FileSystemPackage;import expo.modules.updates.UpdatesController;import java.lang.reflect.InvocationTargetException;import java.util.Arrays;import java.util.List;import javax.annotation.Nullable;public class MainApplication extends Application implements ReactApplication {  private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(    new BasePackageList().getPackageList(),    null  );  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {    @Override    public boolean getUseDeveloperSupport() {      return BuildConfig.DEBUG;    }    @Override    protected List<ReactPackage> getPackages() {      List<ReactPackage> packages = new PackageList(this).getPackages();      packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));      return packages;    }    @Override    protected String getJSMainModuleName() {      return "index";    }    @Override    protected @Nullable String getJSBundleFile() {      if (BuildConfig.DEBUG) {        return super.getJSBundleFile();      } else {        return UpdatesController.getInstance().getLaunchAssetFile();      }    }    @Override    protected @Nullable String getBundleAssetName() {      if (BuildConfig.DEBUG) {        return super.getBundleAssetName();      } else {        return UpdatesController.getInstance().getBundleAssetName();      }    }  };  @Override  public ReactNativeHost getReactNativeHost() {    return mReactNativeHost;  }  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);    // initializeFlipper(this); // Remove this line if you don't want Flipper enabled    if (!BuildConfig.DEBUG) {      UpdatesController.initialize(this);    }  }  /**   * Loads Flipper in React Native templates.   *   * @param context   */  private static void initializeFlipper(Context context) {    if (BuildConfig.DEBUG) {      try {        /*         We use reflection here to pick up the class that initializes Flipper,        since Flipper library is not available in release mode        */        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);      } catch (ClassNotFoundException e) {        e.printStackTrace();      } catch (NoSuchMethodException e) {        e.printStackTrace();      } catch (IllegalAccessException e) {        e.printStackTrace();      } catch (InvocationTargetException e) {        e.printStackTrace();      }    }  }}

here's s my packages.json

{"name": "Lawyr","version": "0.1.0","private": true,"devDependencies": {"@babel/core": "~7.9.0","babel-eslint": "^10.0.1","babel-jest": "~25.2.6","eslint": "^5.7.0","eslint-config-airbnb": "^17.1.0","eslint-plugin-import": "^2.14.0","eslint-plugin-jest": "^21.25.1","eslint-plugin-jsx-a11y": "^6.1.2","eslint-plugin-react": "^7.11.1","jest": "~25.2.6","jest-expo": "^37.0.0","react-native-debugger-open": "^0.3.17","react-native-scripts": "1.11.1","react-test-renderer": "16.2.0"  },"main": "node_modules/expo/AppEntry.js","scripts": {"start": "react-native start","android": "react-native run-android","ios": "react-native run-ios","test": "jest"  },"jest": {"preset": "jest-expo"  },"dependencies": {"@react-native-community/google-signin": "^4.0.3","@react-native-community/netinfo": "5.5.1","@react-native-community/viewpager": "^4.0.0","axios": "^0.18.0","date-fns": "^1.29.0","enzyme": "^3.7.0","enzyme-adapter-react-16": "^1.6.0","expo": "^37.0.0","expo-constants": "~9.0.0","expo-font": "~8.1.0","expo-linear-gradient": "~8.1.0","expo-permissions": "~8.1.0","expo-updates": "~0.1.0","lodash": "^4.17.10","prop-types": "^15.6.2","react": "~16.9.0","react-dom": "~16.9.0","react-native": "~0.62.2","react-native-app-intro-slider": "^0.2.4","react-native-chart-kit": "^5.4.0","react-native-credit-card-input": "^0.4.1","react-native-datepicker": "^1.7.2","react-native-fbsdk": "^2.0.0","react-native-gesture-handler": "~1.6.0","react-native-hr-component": "^1.0.6","react-native-mock-render": "^0.1.2","react-native-modal-datetime-picker": "^6.0.0","react-native-paystack": "^3.4.0","react-native-picker-select": "^5.1.0","react-native-reanimated": "~1.7.0","react-native-screens": "~2.2.0","react-native-scrollable-tab-view": "^1.0.0","react-native-svg": "11.0.1","react-native-swipe-list-view": "^3.1.1","react-native-tab-view": "0.0.77","react-native-unimodules": "~0.9.0","react-native-vector-icons": "^6.6.0","react-native-web": "~0.11.7","react-navigation": "^2.9.3","react-redux": "^5.0.7","redux": "^4.0.0","redux-devtools-extension": "^2.13.5","redux-logger": "^3.0.6","redux-mock-store": "^1.5.3","redux-persist": "^5.10.0","redux-thunk": "^2.2.0","styled-components": "^3.2.3","whatwg-fetch": "^2.0.4"  }}

i did build release and the app crashes on launch i tried build it with debug and run without error.

the app was initially in expo but did expo eject to get the ios and android folders

Is there any chances to get working React Native in WSL2 in Windows 10? I know I'll lose ability to run iOS (for now my primary developing machine is Macbook Pro), but how to set up Android?I found some info in the Internet, like this for Flutter, this and this. Even after running the script for Powershell, my WSL2 node can't connect to running emulator in Windows 10 (I have Android Studio installed both in WSL2 and Windows 10).If anyone get this working - could you provide a detailed step-by-step guide for this? I'm not very experienced in development on Windows 10, i.e. I don't know Powershell.

In react-native development, there are multiple caches used when the app is built:

1. React-native packager cache
2. Emulator cache
3. Java side cache (.gradle) folder (only in android)
4. npm cache (if relevant?)

Am I missing something also? Because I'm trying to clear cache in react-native, to be able to repeat a bug that only occurs on first usage. But clearing those caches above did not help. This is on android. When the app is building, most of the rows DO NOT say UP-TO-DATE, as expected, because I cleared the cache.

But, there are still many rows where this text is printed. Like:

app:preBuild UP-TO-DATE

app:preDebugBuild UP-TO-DATE

:app:preReleaseBuild UP-TO-DATE

The question is, how can I clear the whole cache related to react-native development?

I'm currently having this error when I build my react native project using android studio. How do I fix this and remove the duplicates.

 Duplicate class com.facebook.imagepipeline.cache.CountingMemoryCacheInspector found in modules imagepipeline-base-2.2.0-runtime.jar (com.facebook.fresco:imagepipeline-base:2.2.0) and stetho-2.0.0-runtime.jar (com.facebook.fresco:stetho:2.0.0)    Duplicate class com.facebook.imagepipeline.cache.CountingMemoryCacheInspector$DumpInfo found in modules imagepipeline-base-2.2.0-runtime.jar (com.facebook.fresco:imagepipeline-base:2.2.0) and stetho-2.0.0-runtime.jar (com.facebook.fresco:stetho:2.0.0)    Duplicate class com.facebook.imagepipeline.cache.CountingMemoryCacheInspector$DumpInfoEntry found in modules imagepipeline-base-2.2.0-runtime.jar (com.facebook.fresco:imagepipeline-base:2.2.0) and stetho-2.0.0-runtime.jar (com.facebook.fresco:stetho:2.0.0)

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".

How can we blur a Text component in React Native?

Info: I just want to make an app where the user does not see the answer directly (via blurring).