I am designing a mobile app to work with a site we already have up and running. There are a few things we would like to take advantage of on the phone, however. For example, using the camera to upload photographs to the site.
Currently, I have this code
export default class App extends Component<Props> {
render() {
return (
<WebView
source={{uri: "https://example.com"}}
/>
);
}
}
Is there some way to add a button that lets users open a menu of options that exists on the app alone (and separate from the site in the webview).
I'v tried something like
export default class App extends Component<Props> {
render() {
return (
<View>
<Text>Test</Text>
<WebView
source={{uri: "https://example.com"}}
/>
</View>
);
}
}
just as a test to see if I can add other elements outside the webview, but my app never loads (I just see a blank white screen) when I try this.
The reason that Test and WewbView won't show up in your example code it's because View doesn't have a defined height, you can use flex:1 to give it the entire screen.
See this working sample:
https://snack.expo.io/#cgomezmendez/vengeful-tortillas
import * as React from 'react';
import { Text, View, StyleSheet, WebView } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Test</Text>
<WebView
source={{uri: "https://google.com"}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
You might have a look at this: react-native-webview-bridge
Related
So basically i'm in the process of learning react native. I'm using the react navigation package and I just want to display a simple header title on my stack navigator but the title cuts off. Stack nav title
This is my App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './screens/HomeScreen'
import DetailsScreen from './screens/DetailsScreen'
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(RootStack)
export default class App extends React.Component {
render(){
return<AppContainer />
}
}
and this is my HomeScreen.js
import React from 'react'
import {Button, View, Text } from 'react-native'
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screeeen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
)
}
}
It doesnt look like this on my friends phones. I'm using a OnePlus 6 with android 9. They are on older versions of android could that be causing something?
Turns out this is a specific problem affecting OnePlus user who has chosen to use the font OnePlus Slate instead of for exmaple robot. Changing the font in the phone fixes the problem, alternatively you force the usage of a font in the app and it should work as well
I got the same problem running on a OnePlus phone and solved it without the font loader but style with the navigation option in headerTitleStyle width like so:
import { Dimensions } from 'react-native';
const WIDTH = Dimensions.get('window').width;
export const MyStackNav = createStackNavigator(
{
Tab1: {
screen: Tab1,
navigationOptions: ({ navigation }) => ({
headerTitle: `${navigation.state.routeName} page`,
headerTitleStyle: {
width: WIDTH - 75,
},
}),
},
...more code
}
A similar issue also occurs in various components like button in one plus devices. One way to solve it by giving some minimum width to the label style, so that you don't have to switch the font family, helps if you are using some custom fonts
Solution: width: '100%' or some fixed value like minWidth: 100
Code example in drawer navigation
<DrawerItem
labelStyle={{ minWidth: 100 }}
label={`Orders`}
onPress={() => {}}
/>
I am attempting to build a notification service I can use within React Navigation; how far I have gotten in this:
Now this is a modal, that the card element has been hidden and then the view style has been filled into only 15% at the top of the element, and the element will react if you click out of the white area of the notification.
Here is the code for the NotificationModal:
import React from 'react';
import { View, TouchableHighlight,TouchableWithoutFeedback } from 'react-native';
import { Text } from 'react-native-elements';
export default class NotificationModal extends React.Component {
static navigationOptions = ({ navigation }) => {
const title = navigation.getParam('title','No item found...');
return {
title: title
};
};
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.props);
}
render() {
const { navigation } = this.props;
let title = navigation.getParam('title', '');
return (
<TouchableWithoutFeedback>
<View style={{ flex: 1 ,flexDirection: 'column', justifyContent: 'flex-start'}}>
<View style={{ height: "15%" ,width: '100%', backgroundColor:"#fff", justifyContent:"center"}}>
<Text style={{fontSize:25}}>{title}xd</Text>
</View>
<TouchableHighlight onPress={() => { this.props.navigation.goBack(); }} style={{backgroundColor: "rgba(0,0,0,0)"}}>
<View style={{ height: "85%" ,width: '100%', backgroundColor: "rgba(0,0,0,0)", justifyContent:"center"}}>
<View>
</View>
</View>
</TouchableHighlight>
</View>
</TouchableWithoutFeedback>
);
}
}
At at my root navigation stack it looks like this:
export default RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
QuickStockModal: {
screen: StockModal,
},
NotificationModal: {
screen: NotificationModal,
}
},
{
mode: 'modal',
headerMode: 'none',
cardStyle:{
backgroundColor:"transparent",
opacity:0.99
}
}
);
Finally I call this pseudo notification modal like any other navigation instance:
this.props.navigation.navigate('NotificationModal', {
title: 'test'
});
Problems with this
It wont just act as a quick update, it will overtake the touch area, I just wish to let the user know things like 'search results empty' or 'barcode invalid' etc, without hijacking the touch. (But being able to touch buttons of the notification within the white area thats visible)
When you press the outside area to dismiss it, the 'dismiss area' turns dark as it disappears, this looks bad, I am hoping to change the animation to simply push up instead of down and hopefully avoid this
this is a messy way to do notifications but other manners will complicate my current app design too much (Using Redux for instance, will be alot of work for simply trying to add in-app notifications)
In-app notification libs arent customizable enough and also dont even work properly sadly
I'm using react-native-sketch library https://www.npmjs.com/package/react-native-sketch and I'm running into a few problems. I want to project a greyed out text and "write" on top of it, much like this.
The problem I'm having is with my current setup, I can write on the sketchview, but the text is "above" the sketchview, so I can't see any writing that's behind the textview. How can I move the text above the sketchview? Thanks!
import Sketch from 'react-native-sketch';
import React, {Component} from 'react';
import { ScrollView,StyleSheet, Text, View, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
save = () => { this.sketch.save().then(({ path }) => { Alert.alert('Image saved!', path); }); };
render() {
return (
<View>
<CardView>
<View>
<Text> Draw </Text>
<View>
<Sketch
ref={sketch => { this.sketch = sketch; }}
strokeColor="black"
style = {styles.sketch}
strokeThickness={3}>
<View>
<Text> text here </Text>
</View>
</Sketch>
</View>
</View>
</CardView>
</View>
);
}
}
I just have started to learn React Native, and I'm following official tutorial, both in my emulator and phone (Android), image doesn't appear, just empty white screen. So my question, why it doesn't displayed on the screen? P.S: internet connection works fine.
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
You're doing the Image part correctly, I believe you just need to wrap it in a view.
import React, { Component } from 'react';
import { AppRegistry, Image, View } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={{flex: 1}}>
<Image source={pic} style={{width: 193, height: 110}}/>
</View>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
I put my images in drowable-*dpi folders,
The image name without capital letters, and its legal name.
The prefix is .png
In index.android.js file:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class proj extends Component {
render() {
return (
<View style={styles.container}>
<Image source={{uri: 'background_home'}} style={{width: 40, height: 40}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('proj', () => proj);
When I run this code -> nothing... the image not shown on my android device.
What can I do to resolve this issue?
Thanks!
There is no support for accessing images under mipmap directory in react-native as of now.
Create a directory called drawable under res directory (Parent directory of mipmap-*). Put your images in that directory. Then your code will work.
Later move all your images based on density to respective directories like drawable-hdpi,drawable-xhdpi,drawable-xxhdpi etc.