I want to implement a flip effect in my React Native app, similar like described here:

https://www.codementor.io/reactjs/tutorial/building-a-flipper-using-react-js-and-less-css

My question is. Can I achieve it somehow with the help of some library like 'Animations'https://facebook.github.io/react-native/docs/animations.html or I have to play with 'plain' CSS styles.

What is the 'good practive' for such animations in React Native?

class CardBack extends Component {  render() {    return (<TouchableOpacity onPress={this.flip}><View style={styles.scrumCardBorder}><View style={styles.cardBack}></View></View></TouchableOpacity>    );  }  flip() {    this.setState({flipped: !this.state.flipped})  }}class CardFront extends Component {  render() {    return (<TouchableOpacity><View style={styles.scrumCardBorder}><View style={styles.cardFront}><Text style={styles.cardValue}>5</Text></View></View></TouchableOpacity>    );  }}

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?

Transition animation, working in version 4.0, but not working in version 5.0

doc 5.0: https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolator

doc 4.0: https://reactnavigation.org/docs/4.x/stack-navigator-1.0/#stacknavigatorconfig

May I ask what I wrote wrong,

In version 4.0

const forHorizontalLeft = sceneProps => {  const {layout, position, scene} = sceneProps;  const index = scene.index;  const inputRange = [index - 1, index, index + 1];  const width = layout.initWidth;  const outputRange = 1 ? [width, 0, -width * 0.3] : [-width, 0, width * -0.3];  const opacity = position.interpolate({    inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1],    outputRange: [0, 1, 1, 0.85, 0],  });  const translateY = 0;  const translateX = position.interpolate({    inputRange,    outputRange,  });  return {    opacity,    transform: [{translateX}, {translateY}],  };};

In version 5.0

screenOptions={{          headerShown: false,          cardStyleInterpolator: ({            closing,            current,            index,            insets,            inverted,            next,            layouts,            swiping,            current: {progress},          }) => {            const _index = index;            const width = layouts.screen.width;            const inputRange = [_index - 1, _index, _index + 1];            const outputRange = 1              ? [width, 0, -width * 0.3]              : [-width, 0, width * -0.3];            const translateY = 0;            const translateX = progress.interpolate({              inputRange,              outputRange,            });            const opacity = progress.interpolate({              inputRange: [                _index - 1,                _index - 0.99,                _index,                _index + 0.99,                _index + 1,              ],              outputRange: [0, 1, 1, 0.85, 0],            });            return {              cardStyle: {                transform: [{translateX}, {translateY}],                opacity,              },              overlayStyle: {                transform: [{translateX}, {translateY}],                opacity,              },            };          },

react-native-swiper issue

1. swiper width and height are resized after screen rotation(using Dimensions.get('window').width, and height,

2. but the scroll is not Re_render, it shows the portions of previous slides

   <Swiper width={screenData.width} height={screenData.height}><View style={[styles.slide, {backgroundColor: '#fa931d'}]}><View level={10}><Text style={styles.text}>Page 1</Text></View></View><View style={[styles.slide, {backgroundColor: '#a4b602'}]}><View level={-10}><Text style={styles.text}>Page 2</Text></View></View><View style={[styles.slide, {backgroundColor: '#fa931d'}]}><View level={8}><Text style={styles.text}>Page 3</Text></View></View><View style={[styles.slide, {backgroundColor: '#a4b602'}]}><View level={5}><Text style={styles.text}>Page 4</Text></View></View></Swiper>

I m new in react-native, i got a issue like this "Invariant Violation: Tried to register two views with the same name RNCWebView "I check npm ls react-native-webview the i got

├─┬ react-native-instagram-login@2.0.0│└── react-native-webview@7.6.0└── react-native-webview@7.6.0

if i delete outer react-native-webview@7.6.0 then i can not use ┬ react-native-instagram-login@2.0.0│└── react-native-webview@7.6.0

if i delete inner webview and i do npm install then again install the inner webview.

I have search lot, but i am able to fix this,

Please help me thank you.

I want to set up deep linking so that any url of myapp.io is opened by the Android app if installed.

Is this a valid pathPrefix? Or should it be "/*"?

"android": {"intentFilters": [        {"action": "VIEW","data": [            {"scheme": "https","host": "*.myapp.io","pathPrefix": "*"            }          ],"category": ["BROWSABLE","DEFAULT"          ]        }      ]    },The code above is from my app.json as I'm using Expo, but I think it's clear what React Native values they map to. 

I would like to debug application by using react-native-debugger in visual studio code in Windows OS.Please tell me how can i debug in real device?

I'm implementing draggable component with react-native.And this component wokrs well on my IOS device.However, when I test this component on virtual android device, it makes error like this:

Error while updating property 'transform' of a view managed by: RCTView

null

Value for translateX cannot be cast from String to Double

And below is my code

export default class DraggableTouchableOpacity extends Component {  constructor (props) {    super(props);  }  componentWillMount() {    this.pan = new Animated.ValueXY();    this.panResponder = PanResponder.create({      onMoveShouldSetPanResponder: () => true,      onPanResponderGrant: (e, gestureState) => {        this.pan.setOffset({x: this.pan.x, y: this.pan.y});      },      onPanResponderMove: (e, gestureState) => {        this.pan.setValue({x: gestureState.dx, y: gestureState.dy});      },      onPanResponderRelease: (e) => {        Animated.spring(this.pan, {          toValue: {x: 0, y: 0},          friction: 5        }).start();      }    });  }  render() {    return (<Animated.View          style = {{            transform: this.pan.getTranslateTransform()          }}          {...this.panResponder.panHandlers}><TouchableOpacity {...this.props} ref = {view => { this.myComponent = view; }}/></Animated.View>    );  }}

As the title description, I'm using react-native-router-flux.

And there is a question, I used backAndroidHandler={true} in <Router/> work normally before.

But now, because some reason I have to set backAndroidHandler to control physical back button enable in different scene.

So I can't just put it in router something like this before:

Example:

<Router    backAndroidHandler={true}><Scene key="a" /><Scene key="b" /><Scene key="c" /></Router>

How could I setting backAndroidHandler in different scene or in the Tag to achieve this without setState (Because it will rerender again at route page)?

I have tried someone said in other question using like <Scene key="c" type={ActionConst.RESET}/> didn't work.

Any help or recommend will be appreciate. Thanks.

I am trying to build a collapsible header tab.

I finally found this one Collapsible Header Tabs Snack which worked perfectly as base code. It worked as expected on IOS, but I had not confirmed the Android version yet. now that I look at it, it's very buggy. This can be seen in the above snack by running in android.

The Header scroll is very buggy (fluctuation) until the tabs clamp onto the top but then the scroll is smooth.I am guessing that there is a problem with the sticky scroll which has animated scroll views and animated views.

I tried adding scrollToOverflowEnabled = {true} overScrollMode={'never'} but it didn't help.

Any help would be appreciated. Thanks

I am using following code to render a webview:

const someHTMLFile = require('./somefile.html')render() {  return (<View style={{flex: 1}}><WebView          style={{flex: 1}}          source={someHTMLFile}          ref={( webView ) => this.webView = webView}      />      </View>  );}

In this html file, there is a form which is automatically submitted when the webview loads (with some data sent from reactnative part of code) and in the end, the file is redirected to a specific url, where some processing is done (on the send data), and right now, it returns nothing. So the screen goes blank.

So, at this point, I want to close the webview and take the user back to my reactnative app.. So, how can I do that? any suggestions?

I am successfully using Vibration.vibrate([1000, 2000], true); inside a component in a React Native Android app - the device vibrates when this is called.

However I am also using HeadlessJS to launch a notification when the app is in the background or killed:

App.js:

import backgroundNotificationHandler from './src/services/backgroundNotificationListener';...AppRegistry.registerComponent(appName, () => App);firebase.messaging().setBackgroundMessageHandler(backgroundNotificationHandler);

backgroundNotificationListener.js:

import { NativeModules, Vibration } from 'react-native';import { parseTimeStringForNotification } from './parseTime'import InCallManager from 'react-native-incall-manager';const backgroundNotificationHandler = async message => {  console.log(Vibration); // logs the Vibration object  InCallManager.startRingtone('_BUNDLE_'); // this works  Vibration.vibrate([1000, 2000], true); // this doesn't work...

Is there any reason this shouldn't work? Is there some kind of OS restriction on this / should I try a third party package here to make the device vibrate?

I don't have expo installed in my project and I use react-native run-ios / react-native run-android. I have deployed to Apple but I'm not sure how to deploy to android.

I know this issue has been raised many times but I have not found a working fix on any of the other threads (Most of which have very little to no replies).

In my implementation I have a ScrollView which is a parent to a list of items that each have a panResponder for sideways swiping (Like tinder cards).

The issue I am having is that the ScrollView stops the panResponder mid-animation and prioritizes scrolling.

I have tried dynamically toggling scrollEnabled on the scrollView on onPanResponderGrant and onPanResponderRelease but this is not a viable solution since scrolling vertically on a panResponder triggers onPanResponderGrant disabling scrolling.

Here is my implementation of panResponder:

this._panResponder = PanResponder.create({        onStartShouldSetPanResponder: (evt, gestureState) => true,        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,        onMoveShouldSetPanResponder: (evt, gestureState) => false,        onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,        onShouldBlockNativeResponder: (evt, gestureState) => false,        onPanResponderTerminationRequest: () => false,        onPanResponderGrant: (event, gestureState) => {          this.pan.setValue(0);          this.opacity.setValue(0)          this.rotation.setValue(0)        },        onPanResponderMove: (event, gesture) => {            this.pan.setValue(gesture.dx)            this.rotation.setValue(gesture.dx)            this.opacity.setValue(gesture.dx)          },          onPanResponderRelease: (event, gestureState) => {            if(gestureState.dx < -SWIPE_THRESHOLD){                this.removeCard()              } else {                this.resetPosition()              }        }      });

And here is the FlatList that renders each swipable card:

<FlatList            data={this.state.cards}            keyExtractor={item => item.id}            renderItem={({ item }) => (<DataCard              type={item.type}              name={item.name}              />            )}          />

I have since swapped out ScrollView with a FlatList with hopes of magically resolving this but no luck.

This functionality works flawlessly on iOS but the issue is still android.

It seems like this is a pretty common issue that has no concrete solution. Which is what Im hoping for by posting this.

Thanks!

I'm trying to test my React Native apk app file.

Here are the steps I made before generate the apk:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

then

cd android && .\gradlew assembleRelease -x bundleReleaseJsAndAssets

I created the key store about a month ago. At that time, I built a AAB to publish to Play Store

I didn't re-generate a new one before doing this

And here's the behavior:It can't open

I uploaded the apk to a social media app called: Zalo. Then downloaded it to my phone. At first I can't open since the Play Store blocked it. Only when I disabled that ability of Play Service in Settings than I could download it

EDIT 1:I follow instructions on how to generate the apk from Android Studio, but at the end, it crashes and gives the error:

the transform cache was reset.EEXIST: file already exists, mkdir 'C:\Users\OKR\Desktop\MeetUp'

I don't know why this happens since I don't have that folder in the Desktop

PLEASE HELP MEEEE

I am developing a react native app I have implemented signup/login/home flow. However, because of the risks associated with the app, I want to limit every user to one device with a unique id.

How can I implement this? What should the authflow look like.

I know I can get device Id from react native device info, so how can I use this to limit a user to a device upon signup/login

I am making a small app with React-Native.Then when I navigate to the next page, the android bottom bar (contains hardware back button) disappears.What is the name of this bar, and how to show it when it disappears?

This is an inactive state.

This is an active state.

How to show this bar? And how do we call this bar?

I would like to build an app in which a smartphone(using any OS) can discover other smartphones in the surroundings using Bluetooth. I know this can be probably achieved using BLE.However, I would like to a communication, in which the devices can "ping" each other through Bluetooth by pressing a button within the app. The app should display something on both devices(think an image) for a few seconds if the button in both devices is pressed at the same time. For this, I assume BLE is not enough as it does not support communication between two smartphones and the BLE central and peripheral model does not seem to fit my aim.I'm new to app development and while I found multiple questions on this, they are pretty old. Please give me pointers to libraries/resources which would help me achieve this.

I was wondering if it's possible to have different apps being built out of a single repo in React Native. The reason I'm trying to do this would probably be a huge edge case, but it's basically for unit testing RN modules that I'm developing.

I know I can unit test individual components using Enzyme, but I have some modules that are part of a whole framework, and I need to do end-to-end unit tests on them. So my thinking is that I should build the app and run unit tests on it with Appium. But what if there are multiple unit tests? I guess we would need to build multiple separate apps? But there's only one index.js file.

I was reading that I could set up some app targets and schemes (iOS) and equivalent stuff in Android. But how would I handle that on the RN side? Where can I specify which .js file is the entry point for each target? And how does RN handle building different targets?

https://www.dev6.com/frameworks/building-multiple-apps-from-one-react-native-project/Read this article about setting up multiple schemes and using those to set environment variables that could influence control flow in the app. However, this would mean that I would have to run the unit tests in serial, loading the same app up over and over with different env (not the end of the world, I guess).

I was thinking that if I had multiple index.js files, one for each unit test, I could maybe set up some separate app targets/schemes and use those, but I guess I would have to figure out how to build and run them concurrently for concurrent unit testing. I think that the react-native run-ios and run-android commands just build a single app though, so I'm not sure how I'd fit that into my unit testing workflow.

Any thoughts on this strategy or other possible strategies would be very welcome! Thanks :)

I'm working into functional components and managing the sate by hooks but facing problem into hooks while validation the form.

here is my states:

const [email, setEmail] = useState('');const [password, setPassword] = useState('');const [validEmail, setValidEmail] = useState(true);const [validPassword, setValidPassword] = useState(true);

and here is my validation method is working fine into debug app but facing problem when I released the app.

const validateFields = (): void => {const emailText = emailconst validEmailText = validEmailconst passwordText = passwordconst validPasswordText = validPasswordif (!validEmailText || !emailText) {  setValidEmail(false);  return;} else if (!validPasswordText || !passwordText) {  setValidPassword(false);  return;}setIsLoading(true);doSingIn(email, password);

};