Posts

Showing posts with the label react-native

React native Release Apk Building Error

Image
Clash Royale CLAN TAG #URR8PPP React native Release Apk Building Error I'll build my react native project it build success, but whenever i will try to build release Apk It's give error error: uncompiled PNG file passed as argument. Must be compiled first into .flat file.. 2 Answers 2 Try this... in your gradle.properties file add these lines android.enableAapt2=false That's not working for me – Akshay Italiya 2 hours ago This is the known issue of react-navigation library. As a workaround you need to add this line to gradle.properties file: react-navigation gradle.properties android.enableAapt2=false and clean all previous build files using: ./gradlew clean By clicking "Post Your Answer"...

How to openRow (leftSwipe) dynamically in react native

Image
Clash Royale CLAN TAG #URR8PPP How to openRow (leftSwipe) dynamically in react native I am using react-native-base to swipable list. As per the code below, Every row will have "md-remove-circle" icon and I want to open row (leftSwipe) by clicking on the "md-remove-circle" icon. It is possible to openRow dynamically by function call ? <List dataSource={this.ds.cloneWithRows(this.state.listViewData)} renderRow={ (data, secId, rowId, rowMap) => <ListItem style={{borderBottomWidth: 1,marginLeft: 0, backgroundColor : data.rowBg}}> <Left> { this.state.rmvCircle && <Icon onPress={()=>this.openCurrenRow()} style={{color:'red'}} name="md-remove-circle" /> } <TouchableOpacity onPress={()=>this.redir(data)}> <Text> {data.text} </Te...

React Native Material top navigator doesn't show the screens

Image
Clash Royale CLAN TAG #URR8PPP React Native Material top navigator doesn't show the screens I have the navigator that renders two lists, it works If I add scrollEnabled, otherwise it doesn't, also if I try to specify tab width it doesn't render the lists.. Here is the working code, but it shows the navigator like this: first list | second list | blank space import { createMaterialTopTabNavigator } from "react-navigation"; import ReadList from "../components/ReadList"; import ReadingList from "../components/ReadingList"; import { primaryColor } from "../styles/colors"; export default createMaterialTopTabNavigator( { Read: ReadList, Reading: ReadingList }, { tabBarOptions: { scrollEnabled: true, labelStyle: { fontSize: 12, color: primaryColor, fontFamily: "Raleway SemiBold" }, style: { ...

how to apply PropType in react-native functional component?

Image
Clash Royale CLAN TAG #URR8PPP how to apply PropType in react-native functional component? I am trying to validate props with PropType but my eslist compiler showing me an error, see image please correct me whats wrong with this? 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.

How to pass data in nested components?

Image
Clash Royale CLAN TAG #URR8PPP How to pass data in nested components? I wonder how to pass data in nested components. I'm making an app using react-native with react-redux, redux-thunk, redux-persist. Based on what I understand about the conception of redux, even though it is consist of nested components, can get or update state from store. However, I'm doing that only pass data as props from parent component to children components. I guess it is not correct usage of redux because the more depth is deeper, the more I have to call functions of parent components. Sounds weird, right? If you see my code, then you would understand what I'm talking about. Here's my code. UPDATED For example, code structure is like bellow. If I want to call action in grandChild component, Should I go up to parent Component? parent.js ... getData = async () => { await Actions.func(); } render() { return ( <Parent> <Child data={data} getData={this.getData...

How can I control new tab action in react native WebView

Image
Clash Royale CLAN TAG #URR8PPP How can I control new tab action in react native WebView I'm using react native WebView. there is a problem when specific web pages. 1. Normal behavior of mobile browser Clicking the Find Zip Code button will open a new tab, find and select an address, and the tab is automatically closed. The selected zip code is entered in a specific input box. 2. Error of react native WebView If I click the Find Zip Code button, page open to the next page instead of the new tab. Finding zip code page does not automatically closed when I select address. because It is not a tab. if I press Back button completely leaves the order page. I checked the function to call when clicking the Find Zip Code button on related homepage. function post_daum() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 각 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백(''...

I am developing react-native with Visual Studio Code. I have the following problems

Image
Clash Royale CLAN TAG #URR8PPP I am developing react-native with Visual Studio Code. I have the following problems When I'm doing 'react-native run-android' I'll have the following questions Scanning folders for symlinks in S:demoTestnode_modules (40ms) JS server already running. Building and installing the app on the device (cd android && gradlew.bat installDebug)... FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring root project 'demoTest'. Could not resolve all files for configuration ':classpath'. Could not resolve com.android.tools.build:gradle:3.1.2. Required by: project : Could not resolve com.android.tools.build:gradle:3.1.2. Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.1.2/gradle-3.1.2.pom'. Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.1.2/gradle-3.1.2.pom'. Connect to 127.0.0.1:1087 [/127.0.0.1...

Custom written iOS native module not exported

Image
Clash Royale CLAN TAG #URR8PPP Custom written iOS native module not exported As my title says, I created a bare bones iOS native module in react native and it is not appearing in the final NativeModules javascript object. Here's exactly what I'm doing. I'm pretty stumped by this. NativeModules react-native init testproj testproj Cocoa Touch Class MyModule In MyModule.h I have the following: MyModule.h #import <React/RCTBridgeModule.h @Interface MyModule : NSObject <RCTBridgeModule> @end In MyModule.m I have the following: MyModule.m #import "MyModule.h" @implementation MyModule RCT_EXPORT_MODULE() @end I run react-native run-ios and the app builds successfully. When printing out the NativeModules like so: react-native run-ios NativeModules import React, {Component} from 'react'; import {NativeModules} from 'react-native' export default class App extends Component { componentWillMount() { console.log('my modules! ', Nat...

Proper way to logout with react-native-fbsdk

Image
Clash Royale CLAN TAG #URR8PPP Proper way to logout with react-native-fbsdk I am using react-native-fbsdk to login through facebook on my react-native app. I call LoginManager.logOut() to logout: it does not actually properly logout out since the next time I try to login, it does not ask me for login/password again so I can only login on one account. react-native-fbsdk LoginManager.logOut() This guy (react-native-fbsdk: How properly log out from facebook?) had the same problem and seem to have found no solution. One trick on iOS is to go to safari then logout from the mobile facebook website. This does not work on android though :( 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.

New component in Navbar, React

Image
Clash Royale CLAN TAG #URR8PPP New component in Navbar, React I'm working on a site where users can draw on an empty canvas ( doodle component ). I want to create a sidebar that will have a '+' link that a user can click on to create a new doodle component or folder that will house multiple components. Ultimately, I would like a user to have folders and and subfolders of their doodles. I would like the file structure to mimic that of the screenshot below. What would be the best way of going about this. I am considering using react router to accomplish this but was wondering if there are alternatives out there that I may be missing? Any suggestions will be appreciated. Thanks. doodle component doodle component If you want the user to go back and forth between doodles, you could use router. Otherwise you could just use the component's state to clean the current doodle and start with a new one. A bit more info would be great to get a bet...

i am using socket.io in node worked for server , but cant connect to my mobile react native as client

Image
Clash Royale CLAN TAG #URR8PPP i am using socket.io in node worked for server , but cant connect to my mobile react native as client this is my first time to publish my question in stackoverflow.So please correct me if i am wrong and i hope you guys can help me. So i have problem with socket.io-client to implemented in react native. There is no syntax error in my code and can run well in expo. But i cant connect it to my server node js who using socket.io as well. This is my client react native code import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; window.navigator.userAgent = 'react-native'; import io from 'socket.io-client/dist/socket.io'; export default class App extends React.Component { state = { name: 'bob' } constructor(){ super(); this.socket = io('localhost:3000',{jsonp: false}); console.log('socket = ',this.socket); ...

objects are not valid as react child (react-native)

Image
Clash Royale CLAN TAG #URR8PPP objects are not valid as react child (react-native) I am trying to initialize firebase in my react native project. This is the error I am facing code for App.js where I am initialising it is App.js import React, {Component} from 'react'; import {View, Text} from 'react-native'; import {Provider} from 'react-redux'; import {createStore} from 'redux'; import reducers from './reducers'; import firebase from 'firebase'; class App extends Component { componentWillMount () { const config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config); } render() { return ( <Provider store={createStore(reducers)}> <View> <Text>Hello! </Text> </View> </Provider...

react-native-camera: How do I test the functionality?

Image
Clash Royale CLAN TAG #URR8PPP react-native-camera: How do I test the functionality? I am implementing the react-native-functionality functionality and trying to test it to make sure it works. This is my code: react-native-functionality return ( <View style={styles.container}> <RNCamera ref={ref => { this.camera = ref; }} style = {styles.preview} type={RNCamera.Constants.Type.back} flashMode={RNCamera.Constants.FlashMode.on} permissionDialogTitle={'Permission to use camera'} permissionDialogMessage={'We need your permission to use your camera phone'} /> <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}> <TouchableOpa...

Jest + Enzyme + React Native: How to test content of tag?

Image
Clash Royale CLAN TAG #URR8PPP Jest + Enzyme + React Native: How to test content of <Text /> tag? I want to unit test with Jest and Enzyme if my <Text /> tag correctly receives props.header as text. <Text /> props.header Usually I was able to test the content of the <Text /> tag like this: <Text /> it("should render a label", () => { expect(wrapper.find(Text).contains("submit")).toBe(true); }); But as soon as I pass an object this is no longer possible. Let me show you: const createTestProps = props => ({ header: SOME_CONSTANT, ...props }); ... let wrapper; let props; beforeEach(() => { props = createTestProps(); wrapper = shallow(<MyList {...props} loaded={false} />); }); it("should render a header", () => { expect(wrapper.find(Text).contains(props.header)).toBe(true); }); This fails with the following error message: ● MyList › rendering › still loading › should render a head...

How to loop over an array of objects and fetch network data for each one in JS?

Image
Clash Royale CLAN TAG #URR8PPP How to loop over an array of objects and fetch network data for each one in JS? I am making apps in React Native. I have to fetch an array of data of categories from a URL and then for each category I have to fetch assets from their respective URLs. This is how far I have gotten: var result = fetch(url) .then((response) => response.json()) .then((jsonData) => { for (var i = 0; i < jsonData.result.length; i++) { var url = jsonData.result[i]; if (url.name == 'navigationURL') { return fetch(url.value); } } }) .then((response) => response.json()) .then((jsonData) => { let categories = ; for (var i = 0; i < jsonData.subCategories.length; i++) { var cat = jsonData.subCategories[i]; console.log(Category); var category = new Category(cat.id, cat.name, cat.type, cat.url, ); console.log(category); categories.push(category); } return ...