Posts

Showing posts with the label react-native

componentDidMount not being called after goBack navigation call

componentDidMount not being called after goBack navigation call I've set up a StackNavigator which will fire a redux action to fetch data on componentDidMount , after navigating to another screen and going back to the previous screen, componentDidMount is no longer firing and I'm presented with a white screen. I've tried to reset the StackNavigator using StackActions.reset but that just leads to my other screens not mounting as well and in turn presenting an empty screen. Is there a way to force componentDidMount after this.props.navigation.goBack() ? componentDidMount componentDidMount StackActions.reset componentDidMount this.props.navigation.goBack() Go Back Function _goBack = () => { this.props.navigation.goBack(); }; Navigation function to new screen _showQuest = (questId, questTitle ) => { this.props.navigation.navigate("Quest", { questId, questTitle, }); }; How are you rendering your components? It might be...

How to use camera roll image in webview react native?

How to use camera roll image in webview react native? I'm trying to capture image from a webview in react native and then display the same on my html page. Problem: I cannot access camera and save images from webview. Solution: I am capturing and saving the images using react-native-camera. Next Problem: I want to display this above saved image in my webview and then save it on a server. Note: My page is able to capture and save the data on server when i am opening it in a browser. I am facinf issues with webview in react native. mywebview.js file import React from 'react'; import { StyleSheet, View, WebView, ActivityIndicator } from 'react-native'; const HtmlPage = require('./index.html'); const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' }, horizontal: { flexDirection: 'row', justifyContent: 'space-around', padding: 10 } }) class WebViewScreen ex...

React-native : Android Debug build does't loads image assets from the react-native assets folder

React-native : Android Debug build does't loads image assets from the react-native assets folder For Testing and sharing purpose , I created an apk using the following code in Terminal react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debugScanning and create apk using Create debug build: cd android ./gradlew assembleDebug This above solution is from stackoverflow that successfully created a good apk file, But, While i am testing the apk, it doesn't shows the icons from the folder "react-native-project-name/assets" only shows white space instead of icons. tested some solutions but noting resolves this issue. version react-native-cli: 2.0.1 react-native: 0.55.4 By clicking "Post Your Answer", you acknowledge that you have read o...

What is metro bundler in react-native?

What is metro bundler in react-native? I am learning react-native. I don't find proper documentation for metro bundler. So, I have few questions on it. As the name suggests it creates a bundle. By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

React Native Debugger state undefined

React Native Debugger state undefined I am trying to use the remote React Native Debugger for my project. I have installed React-Native-Debugger on my Mac with $ brew update && brew cask install react-native-debugger . Then I added Remote-redux-devtools package with npm install --save-dev remote-redux-devtools $ brew update && brew cask install react-native-debugger npm install --save-dev remote-redux-devtools My createStore code looks like this atm. import { createStore, applyMiddleware } from 'redux' import { composeWithDevTools } from 'remote-redux-devtools' import thunk from 'redux-thunk' /* some other imports */ const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 }) export default createStore(rootReducer, composeEnhancers( applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave) )) Console output works just fine, but it is not picking up on the actions or redux state. Am I missing a step? Why isn't it ...

this.setState doesnt change the state

this.setState doesnt change the state So, I am trying to change the state using previous state, but it doesnt change whatsoever. Can anyone tell me whats the problem pls? handleToggleComplete = (key, complete) => { itemIndex = this.state.items.findIndex(item => item.key === key); console.log('before: ', this.state.items); this.setState(prevState => { return { ...prevState, items: [ ...prevState.items, prevState.items[itemIndex]: { completed: true, text: 'hardcoded value' } ] } }); console.log('after: ', this.state.items); } Logs: before: [{…}] {key: 1530370127933, completed: false, text: "some value"} after: [{…}] {key: 1530370127933, completed: false, text: "some value"} 1 Answer 1 t...

Will I be able to code/publish iOS and Android apps in Mountain Lion using React Native framework?

Will I be able to code/publish iOS and Android apps in Mountain Lion using React Native framework? I'm starting to learn React Native and I'd like to NOT use Create React Native App to code for Android and iPhone because it seems I'll lose some part of the "fun". Create React Native App In order to do that, it seems I need to use a Mac OS to code, or at least test on iPhone. MacBooks are out of my budget at the moment, and download from internet is not an option, so the only option, that seems quite right, is to virtualize a Mac OS, but the latest available OS to buy is Mountain Lion . Mountain Lion Will I be able to code/publish iOS and Android React Native apps on Ubuntu and test/publish, on both plataforms, using Mountain Lion in a VM? Thanks in advance! iOS Android Mountain Lion By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, priva...

GET with query string with Fetch in React Native

GET with query string with Fetch in React Native I am making a request like this: fetch("https://api.parse.com/1/users", { method: "GET", headers: headers, body: body }) How do I pass query string parameters? Do I simply add them to the URL? I couldn't find an example in the docs. Possible duplicate of Setting query string using Fetch GET request – Hirurg103 Jun 30 at 14:29 4 Answers 4 Your first thought was right: just add them to the URL. Remember you can use template strings (backticks) to simplify putting variables into the query. const data = {foo:1, bar:2}; fetch(`https://api.parse.com/1/users?foo=${encodeURIComponent(data.foo)}&bar=${encodeURIComponent(data.bar)}`, { method: "GET", headers: headers...

React Native Chrome Debugger Showing Full Path

Image
React Native Chrome Debugger Showing Full Path I am setting up debugger tool for react native from this link chrome-debug-tools-for-react-native-mutiple-issues However full path is used in source map, which makes it hard to be debugged. Anyone knowing what are the fixes ? It should be Thanks By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

using states in a react-navigation without redux

using states in a react-navigation without redux as written in the react-navigation page: Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work. In the next version of react-navigation it could be hard to use redux with react-navigation. My question is: what can I do to use states (and passing states between screens) in a react-navigation app without using redux? 2 Answers 2 For children of navigator react-navigation gives you an withNavigation HOC, so you can easily wrap the component inside it to access the navigation state and navigate. withNavigation Why you integrate react navigation with redux? For me, I want to be able to perform navigation actions from outside of my components(screens). Eg: Redux-saga. If we don't integrate, we can't navigate via red...