San Song Daddy :)

Render render() { return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.title}> {I18n.t('wcsqa')} // your title </Text> <TouchableOpacity onPress={() => {}}> <Image style={styles.option} source={require('./res/img/nav_icon.png')} /> </TouchableOpacity> </View> <View style={styles.content}> <Text> {this.wcs[0].Q} // your content </Text> </View> </View> ) } Style const styles = StyleSheet.create({ container: { flex: 2, }, header: { backgroundColor: '#00FF7F', flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', }, title: {

Error Unable to process incoming event 'ProgressComplete ' (ProgressCompleteEvent) on Windows Solution I looked solution from web, but not found one can work for my issue. https://github.com/gradle/gradle/issues/882 Then I just closed my shell window(cmd.exe or powershell.exe) and reopen a new one, I found the issue gone.

render render() { return ( <ImageBackground style={styles.bgimg} source={require('./res/img/wcs.png')}> <View style={styles.fgcontainer}> <Text style={styles.qa}> WCS WCS WCS </Text> </View> </ImageBackground> ); } Style const styles = StyleSheet.create({ bgimg: { flex: 1 }, fgcontainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, qa: { fontSize: 30, fontWeight: 'bold' } }); No Image, No Truth

Render render() { return ( <View style={styles.splashContainer}> <Image source={require('./res/img/Catechism-words.png')}> </Image> </View> ) } Style const styles = StyleSheet.create({ splashContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#00FF7F' } }); No Image, No True

No Image, No Truth use WebView component in reactnative. var { ...., WebView, } = React; initial state give a default url getInitialState: function() { return { url: '', // or default url }; }, render with state url <WebView ....your styles, properties url={this.state.url} /> Navigate/load codes load() { this.setState({url:'http://google.com'}); } Full Sample Codes import React, { Component } from 'react'; import { Button, Modal, Image, Keyboard, NativeModules, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View, WebView, } from 'react-native'; const { WeChat } = NativeModules; const SHARE_TO_WXTIMELINE = 0; const SHARE_TO_WXSESSION = 1; const webview = "webview"; const HOME_URL = " https://errong.win "; export default class App extends Component<{}> { componentWillMount () { this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {this.k

Refer https://facebook.github.io/react-native/docs/modal.html No Image, No Truth Full Codes import React, { Component } from 'react'; import { Button, Modal, Image, Keyboard, NativeModules, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View, WebView, } from 'react-native'; const { WeChat } = NativeModules; const SHARE_TO_WXTIMELINE = 0; const SHARE_TO_WXSESSION = 1; const webview = "webview"; const HOME_URL = "https://errong.win"; export default class App extends Component<{}> { componentWillMount () { this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {this.keyboardDidHide()}); } componentWillUnmount () { this.keyboardDidHideListener.remove(); } keyboardDidHide () { console.log( this.urlText ); if (this.urlText != null) { this.setState({url:this.urlText}); } } constructor(props) { super(props);

Solution Use TouchableOpacity , Image and Styles . Key codes import React, { Component } from 'react'; import { Image, StyleSheet, TouchableOpacity, } from 'react-native'; <TouchableOpacity style={styles.sharebutton} onPress={() => {this.onShare(SHARE_TO_WXTIMELINE)}} > <Image source={require('./res/img/wxtimeline.png')} /> </TouchableOpacity> No Image, No Truth See Full sample codes Share to WeXin via Modal

I tried to export wechat sdk as a native module. I copied some codes here: public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {  private String appId;  public WeChatModule(ReactApplicationContext context) {  super(context);  }  @Override public String getName() {  return "RCTWeChat";  }  } I used "RCTWeChat" as the module name, I did not know the "RCT" prefix meanings. ReactContextBaseJavaModule requires that a method called getName is implemented. The purpose of this method is to return the string name of the NativeModule which represents this class in JavaScript. Then I encountered error in my react-native JS codes. import {NativeModules} from 'react-native'; const { RCTWeChat } = NativeModules; WeChat or NativeModules.RCTWeChat always undefined. Cause RCT is a prefix used in react native, it will be removed when exported to JS. React Native uses RCT as a prefix. In

What went wrong: Execution failed for task ':app:installDebug'. com.android.builder.testing.api.DeviceException: No connected devices! Cause ADB driver is not ready Solution Install correct driver

F:\webrowser>react-native run-android Scanning folders for symlinks in F:\webrowser\node_modules (73ms) Starting JS server... Building and installing the app on the device (cd android && gradlew.bat install Debug)... Downloading https://services.gradle.org/distributions/gradle-4.1-all.zip Exception in thread "main" javax.net.ssl.SSLHandshakeException: sun.security.val idator.ValidatorException: PKIX path building failed: sun.security.provider.cert path.SunCertPathBuilderException: unable to find valid certification path to req uested target at sun.security.ssl.Alerts.getSSLException(Alerts.java:192) at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1959) at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:302) at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:296) at sun.security.ssl.ClientHandshaker.serverCertificate(ClientHandshaker. java:1514) at sun.security.ssl.ClientHandshaker.processMessage(ClientHandshaker.jav a:216) at s

APIs: window.postMessage in WebView , post a message to react-native JS . onMessage callback in react-native JS , receive a message from WebView . injectjavascript , Function that accepts a string that will be passed to the WebView and executed immediately as JavaScript. injectedjavascript , Set this to provide JavaScript that will be injected into the web page when the view loads. onMessage A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage. window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data must be a string. Sample code import React, { Component } from 'react'; import { Button, Platform, StyleSheet, Text, View, WebView, } from 'react-native'; var WEBVIEW_REF = 'webview'; export default class App extends Component<

F:\webrowser>react-native run-android Command run-android unrecognized. Make sure that you have run npm install an d that you are inside a react-native project. F:\webrowser>npm install added 781 packages in 338.768s

F:\webrowser>npm install -g react-native-cli npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to https://registry.npmjs.org/react-native-cli failed, reason: unable to verify the first certificate npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-01-11T1 6_55_54_266Z-debug.log solution npm config set strict-ssl false F:\webrowser>npm install -g react-native-cli C:\Users\Administrator\AppData\Roaming\npm\react-native -> C:\Users\Administrato r\AppData\Roaming\npm\node_modules\react-native-cli\index.js react-native-cli@2.0.1 added 41 packages in 23.687s

Refer: https://facebook.github.io/react-native/docs/signed-apk-android.html create your own key store file https://errong.win/generate-keystore/ modifications error INSTALL_FAILED_UPDATE_INCOMPATIBLE https://errong.win/react-native-run-android-variant-release/ java.lang.NullPointerException (no error message) When I set below values to true, I encountered NullPointerException. so my reset them to false again. + def enableSeparateBuildPerCPUArchitecture = true + universalApk true // If true, also generate a universal APK + def enableProguardInReleaseBuilds = true error can't delete/read lint-results-release-fatal.html kill all java.exe via task manager

Task :app:installRelease Installing APK 'app-release.apk' on 'Nexus_5X_API_23(AVD) - 6.0' for app:release Unable to install C:\Users\lenger\Desktop\webrowser\android\app\build\outputs\apk\release\app-release.apk com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE at com.android.ddmlib.Device.installRemotePackage(Device.java:1004) at com.android.ddmlib.Device.installPackage(Device.java:911) at com.android.builder.testing.ConnectedDevice.installPackage(ConnectedDevice.java:122) at com.android.build.gradle.internal.tasks.InstallVariantTask.install(InstallVariantTask.java:171) at com.android.build.gradle.internal.tasks.InstallVariantTask.install(InstallVariantTask.java:105) at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73) at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.doExecute(DefaultTaskClassInfoStore.java:141) at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInf

Solution 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 c:\Users\lenger\Desktop\webrowser>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 Scanning folders for symlinks in c:\Users\lenger\Desktop\webrowser\node_modules (43ms) Scanning folders for symlinks in c:\Users\lenger\Desktop\webrowser\node_modules (38ms) Loading dependency graph, done. bundle: start bundle: finish bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle bundle: Done writing bundle output Run react-native run-android again, you will find your modification work.

Could not resolve all files for configuration ':classpath'. Could not find com.android.tools.build:gradle:3.0.1. Searched in the following locations: https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.1/gradle-3.0.1.pom https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.1/gradle-3.0.1.jar Required by: project : Solution Add google() inside buildscript() and Sync Project.

c:\Users\lenger\Desktop\webrowser>git diff android/build.gradle diff --git a/android/build.gradle b/android/build.gradle index eed9972..c5fecab 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -5,7 +5,7 @@ buildscript { jcenter() } dependencies { - classpath 'com.android.tools.build:gradle:2.2.3' + classpath 'com.android.tools.build:gradle:3.0.1' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files c:\Users\lenger\Desktop\webrowser>git diff android/app/build.gradle diff --git a/android/app/build.gradle b/android/app/build.gradle index b589c49..b20457c 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -95,7 +95,6 @@ def enableProguardInReleaseBuilds = false android { compileSdkVersion 23 - buildToolsVersion "23.0.1" defaultConfig { applicationId "com.webrowser"

FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring project ':app'. Failed to notify project evaluation listener. com.android.build.gradle.tasks.factory.AndroidJavaCompile.setDependencyCacheDir(Ljava/io/File;)V Open your app via Android Studio, you will get more info to resolve the issue. The versions of the Android Gradle plugin and Gradle are not compatible. Please do one of the following: Update your plugin to version 2.4. Downgrade Gradle to version 3.5.

First you need one png file as your launcher icon. Then you need to resize this icon file to needed resolutions. There is a simple service to resize your app icon to all needed resolutions with rocket speed . Then you can download all your needed icons. Then replace each ic_launcher.png via image with correct resolution. webrowser/android$ find -name "ic_launcher.png" ./app/src/main/res/mipmap-hdpi/ic_launcher.png ./app/src/main/res/mipmap-mdpi/ic_launcher.png ./app/src/main/res/mipmap-xhdpi/ic_launcher.png ./app/src/main/res/mipmap-xxhdpi/ic_launcher.png Or you can use Image Asset Studio to create App Icons. 1.open Android Studio poject in your react native application. 2.use Image Asset Studio In the Foreground Layer tab, select an Asset Type, and then specify the asset in the field underneath: Select Image to specify the path for an image file. If your app supports Android 8.0, create adaptive and legacy launcher icons. If your app supports versions no