Develop Reference

Implementing file upload functionality that support Android devices in a web view via React Native

I have a page:
import React, {Component} from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet, WebView } from 'react-native';
//import all the basic component we have used
export default class ProfileScreen extends React.Component {
//Profile Screen to show from Open profile button
render() {
return (
<WebView
source={{uri: 'mobilesite'}}
style={{marginTop: 20}}
/>
);
}
}
On this mobile site, I have a <input type="file" /> element; in testing, I noticed that the file upload functionality works in iOS devices but not Android.
I've researched various threads on this topic, but many are from 1 year or older. I'd like to doublecheck with the developer community that a better solution (that I haven't yet researched) is available?

Thanks #Akshay Mulgavkar for the initial suggestion! https://github.com/react-native-community/react-native-webview (I just tested and it works in Android and iOS!), also to anyone reading this who's just getting into app development and who may be frustrated when they hit a roadblock, please keep learning, you'll get there, one step at a time :)

Can't use newly imported components in React Native?

I've been working on this program and I've recently tried to use some new components from the react-native library like Icon and Header but whenever I try to use them in the render function I get error:
"Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
This is really weird to me because I was, and still am, using components like Image, Text, and View without a problem so I don't get why I would be having an issue now with these new components. I'm not sure what I changed in my program to cause something like this to happen.
Only thing I can think of is that "Settings" used to be a default class but it is now not, but that doesn't explain how the old component I was using from the library still work. Keep in mind the other components I imported before like Image and others still work.
Here's and snippet of the offending code:
import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight, Image, Header, Icon} from 'react-native';
import { createStackNavigator } from 'react-navigation';
export class Settings extends React.Component {
render(){
return (
<View>
<View style={{height: 55, backgroundColor: '#007ebc'}}>
<View style={{flexDirection: "row", marginLeft: 10}}>
<Icon //<-------USING ICON WILL GIVE ME ERROR
name = 'arrowleft'
/>
<Image source={require("../assets/LogoLrg.png")}
style={{ width: 55, height: 30, marginTop: 10 }}
/>
<Text style={styles.headerText}> Settings </Text>
</View>
</View>
</View>
)
}

I don't think Icon or Header component exists in react-native library.
You can check it in react native website or react-native.js source code.
http://facebook.github.io/react-native/docs/getting-started

Unless I have missed some major update to React Native, you cannot import Header and Icon components from react-native because they don't exist. These components may be a part of some open-source library like react-native-elements or native-base, so you first have to install them:
npm i native-base --save
or,
npm i react-native-elements --save
and then use them:
import { Header, Icon } from 'react-native-elements' //or 'native-base'
RN Elements: Icon, Header
Native Base: Icon, Header

React Native StackNavigator disappearing on re-entry

We are encountering a very bizarre scenario with react-navigation in our React Native application that is only observed on Android (both in the emulator and on physical devices AND for debug builds as well as release builds), but it works fine on iOS.
Context
We have an existing native application, and decided to implement some new screens in React Native as an experiment to see whether it would benefit our development lifecycle.
Our native app has a sidebar menu, and we added a new menu item, that when selected, takes the user into the React Native portion. They can of course navigate back out whenever they want, and later go back into that React Native portion.
Observed problem (Only occurs in Android)
We have identified it relates to the react-navigation library, but we don't know what we're doing wrong.
When the app is first loaded, the user can select the new menu item and the React Native app loads fine, showing its initial route page and with the StackNavigator working fine.
If the user returns to the native portion (either via the back key, or by selecting a different option from the sidebarmenu) and then later opts to return to the React Native portion, then the StackNavigator portion doesn't display. Other React components outside the StackNavigator get rendered. We know it mounts the contained components, as some of them are making API calls and we see those endpoints being queried. It just doesn't render.
Reloading within the emulator will render the app properly again until we navigate out of React Native and then return.
Oddly enough: If we turn on remote JS debugging, it suddenly all works fine.
So our question:
Can anyone spot what we might be missing in how we are using the StackNavigator, that is keeping it from rendering properly? Again: it works fine when the JS debugger is on, making us think that it is not a logic item, but perhaps a timing condition, or some subtle config? Or should we just ditch react-navigation and go to a different navigation library?
Simple reproduction of the issue
Our package.json is:
{
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-navigation": "1.5.2"
}
}
Our React Native entry page (index.js) is:
import * as React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import TestPage from './TestPage';
AppRegistry.registerComponent('MyApp', () => MyApp);
class MyApp extends React.Component {
public render() {
return (
<View style={{flex:1}}>
<Text>'This text always shows up fine on Android, even on reentry to React application'</Text>
<AccountNavigator />
</View>
);
}
}
const AccountNavigator = StackNavigator(
{
FirstPage: {
screen: TestPage,
navigationOptions: ({ navigation }) => ({
title: 'Test View'
})
},
{
initialRouteName: 'FirstPage'
}
);
The simple test page (TestPage.js) is just:
import * as React from 'react';
import { Text, View } from 'react-native';
export default class TestPage extends React.Component {
render() {
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Text>'If you can read this, then the app is on first load. But return to the native portion and then try to come back to React Native and you will not see me.'</Text>
</View>
);
}
}

Turns out it was a layout setting issue. In our native code, within our React Activity layout XML we had:
<com.facebook.react.ReactRootView
android:id="#+id/ReactRootView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
and the issue was in the "wrap_content" for height which was causing it to render the StackNavigator() as 1 pixel high. No idea why it always happened only on re-entry and not on the first time, nor why the JS debugger would cause the issue to disappear.
Changing layout_height to "match_parent" resolved the issue altogether.

make browsers with react native

I have a mobile site and I want to make an android browser app where I want to open my site.
I have tried and react-native-browser. Something like..
import {
processColor, // make sure to add processColor to your imports if you want to use hex colors as shown below
} from 'react-native';
// at the top of your file near the other imports
var Browser = require('react-native-browser');
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
{Browser.open('https://google.com/')}
</View>
);
}
}
But got no success...
I just want to make a browser that opens my mobile site..
Is there any better way of doing this or if someone has any idea how to use react-native-browser ?
Thanks in advance

Looking at the source code, it seems this browser is only available on iOS.

you must search in this web https://js.coach/react-native?search=browser for example https://github.com/d-a-n/react-native-webbrowser

Why are you trying to look for an external library while there is a WebView Component already integrated with react-native itself?
WebView renders web content in a native view. You can use this
component to navigate back and forth in the web view's history and
configure various properties for the web content.
You can just add a WebView and open up the desired web url.
Example
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}

You can use https://www.npmjs.com/package/react-native-webbrowser
Install:
npm i react-native-webbrowser --save
Use:
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
<Webbrowser
url="https://your-url.com"
hideHomeButton={true}
hideToolbar={true}
hideAddressBar={true}
hideStatusBar={true}
foregroundColor={'#efefef'}
backgroundColor={'#333'}
/>
</View>
);
}
Set all the hide's props to true to make your app display only the site

Cache image on react native

Is there a good library or maybe some default react native components that cache the image from a url?
I've tried react-native-cache-image but there are a lot of issues with react-native-fs and react-native-sqlite-storage and as I am new to react native I dont know how to fix them properly.

yarn add react-native-fast-image
Ref: https://github.com/DylanVann/react-native-fast-image
import FastImage from 'react-native-fast-image'
<FastImage
style={{ width: 200, height: 200 }}
source={{ uri: 'https://unsplash.it/400/400?image=1' }}
resizeMode={FastImage.resizeMode.stretch}
/>

You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component. My module depends on react-native-fetch-blob which is the goto well-respected and battle-tested library for downloading files, so you shouldn't have dependency problems.
React Native Image Cache HOC
Tl;DR Code Example:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
</View>
);
}
}
The first image will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.
The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app.
It also sounds like you are interested in arbitrarily storing image files to local disk. You can do that with a CacheableImage static method like so:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true)
.then( localFileInfo => {
console.log(localFileInfo);
// Console log outputs:
//{
// url: 'https://i.redd.it/rc29s4bz61uz.png',
// cacheType: 'permanent',
// localFilePath: '/this/is/absolute/path/to/file.jpg'
//}
});
Hope this helps!

Straight from the Expo docs:
import React from 'react';
import Expo from 'expo';
import { Image, View } from 'react-native';
import logo from './assets/icon.png';
const cacheImages = images => images.map(image => {
if (typeof image === 'string') return Image.prefetch(image);
return Expo.Asset.fromModule(image).downloadAsync();
});
class View extends React.component {
state = {
appIsReady: false
}
componentWillMount() {
this.loadAssetsAsync();
}
async loadAssetsAsync = () => {
const imageAssets = cacheImages([icon]);
await Promise.all([...imageAssets]);
this.setState({ appIsReady: true });
}
render() {
return(
<View>
<Image source={logo} style={styles.imageStyle} />
</View>
);
}
}
I think the code snippet is straight forward. You will have a state that will set to true when all your images are loaded. You will have the cacheImages function that will handle the work for you. The only requirement you will need is Expo.

I have used this library and working in both android and ios phones. It is working in Both EXPO and ReactNative. In react native automatically stored catch images.
For Installation the library:
yarn add picache
then use in your js file like this, first import the file and used it. For more information click
import Picache from "picache";
const App = () => (
<Picache
style={{ height: 150, width: 350 }}
source={require("./square.png")}
/>
);

There's prefetch() method built in Image component.