I want to make an app that shows the URL I passes. I tried react native web view and it got some issues while deep linking and others. I found expo webbrowser and I find that solves my problem.
The code I tried is the following
import React, { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
export default function App() {
const [result, setResult] = useState(null);
const _handlePressButtonAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://expo.io');
setResult(result);
};
return (
<View style={styles.container}>
<Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
<Text>{result && JSON.stringify(result)}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
It's the demo code from the expo webbrowser site. I want to remove the address bar on the top and launch the website without clicking the button. The following code didn't work
let result = await WebBrowser.openBrowserAsync('https://expo.io',{showTitle:false});
....
return (_handlePressButtonAsync);
Expo Webbrowser
Related
I am new to react native, started learning yesterday.
So, far my file structure is this:
---Assets
--- (some images)
---Screens
---WelcomeScreen.js
---Login.js
---app.js
---server.py (contains my flask API implementations)
I would like to navigate from WelcomeScreen to Login screen on clicking the login or register button inside WelcomeScreen and also send a rest API call to my backend so that I can further process the info.
app.js:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WelcomeScreen from './screens/WelcomeScreen';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<WelcomeScreen />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container:{
flex: 1,
width: "100%",
height: "100%",
}
})
WelcomeScreen.js
import React from 'react';
import { ImageBackground, StyleSheet, View, SafeAreaView, Text, Button } from 'react-native';
import Login from './Login';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/bg.jpg")}>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Login"
color="#fc5c65"
/>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Register"
color="#4ecdc4"
/>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
export default WelcomeScreen;
Login.js
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
export default function Login() {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/splash.png")}>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
Now, from the WelcomeScreen.js,
I want to go to the login page upon clicking login button or register button and also send a restAPI call to the backend.
How do I do this??
Navigation isn't always built in to react native. Primarily people use libraries to handle this smoothly. Based on your code, you've been following an example based on using react-navigation which you can read about here. Essentially you'll need nest all of your screens inside of special components from that library which will pipe the navigation prop through to your screen components.
In order to run the API calls, you can add those functions calls on a new line in each of the functions you are passing as the onPress prop. Alternatively, you could place a useEffect hook in your screen components to make the API call after the navigation has completed.
// in Login.js
export const Login = () => {
useEffect(() => {
callAPI()
}, []);
...
}
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, SafeAreaView, Image } from 'react-native';
import Constants from 'expo-constants';
import * as MediaLibrary from 'expo-media-library';
import * as Permissions from 'expo-permissions';
export default function App() {
const [alb,setalb]=useState([''])
async function permissions(){
console.log("printing cameraroll")
const {sp}= await Permissions.askAsync(Permissions.CAMERA_ROLL)
const albums = await MediaLibrary.getAlbumsAsync()
const listOfTitles = albums.map(album => album.title);
const listofid = albums.map(album => album.id);
albu(listofid,listOfTitles)
}
async function albu(fn,ld) {
console.log("entered albu")
const options={
album:"WhatsApp Images",
first:10,
}
let video = await MediaLibrary.getAlbumAsync(ld[1])
console.log(video.assetCount);
const ac= video.assetCount
const firs = await MediaLibrary.getAssetsAsync({album:fn[1],first:100})
console.log(firs.assets[65].uri)
}
return (
<View style={styles.container}>
<View>
<Button title="Click-me" onPress={permissions} />
</View>
<SafeAreaView style={{flex:1}}>
{alb.map((goal) => <Text>{goal}</Text>)}
</SafeAreaView>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding:Constants.statusBarHeight,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding:Constants.statusBarHeight
},
});
i am trying to build a app kind of locker with special attributes and security since multiple selection for images is not available for image picker i decided to build my own picker inorder to retrieve all the file location for a given album i decided to use media library api but using the given function i am only able to retrieve few file location rest its showing truncated when i display it in object format or when i try to print file location it gives undefined not a is not a object is there a way for multiple selection of images or to display all the images using media library
enter image description here
My code
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Constants from 'expo-constants';
import * as MediaLibrary from 'expo-media-library';
import * as Permissions from 'expo-permissions';
export default function App() {
async function permissions(){
console.log("printing cameraroll")
const {sp}= await Permissions.askAsync(Permissions.CAMERA_ROLL)
const s=await MediaLibrary.getAlbumsAsync("title")
console.log(s);
}
return (
<View style={styles.container}>
<Button title="Click-me" onPress={permissions} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding:Constants.statusBarHeight,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding:Constants.statusBarHeight
},
});
i am trying to create a gallery type which will be part of my app so i want to read the title but i am unable to access the object
If you want to get a list of all titles you can do it like this:
const listOfTitles = MediaLibrary.getAlbumsAsync().map(album => album.title);
In case "getAlbumsAsync" returns a promise (documentation doesn't say so), then you can get it like this:
const albums = await MediaLibrary.getAlbumsAsync();
const listOfTitles = albums.map(album => album.title);
Im very new to react-native and expo.
I can't solve this problem myself.
My previous code was this.
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
export default class Home extends React.Component {
handleSignOut = () => {
firebase
.auth()
.signOut()
.then(result => alert('sign out success'))
.catch(error => console.error(error));
};
render() {
return (
<View style={styles.container}>
<Text>Main</Text>
<TouchableOpacity onPress={this.handleSignOut}>
<Text>Sign Out</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Then I just changed the text 'Main' to 'Home' and saved.
After that expo client was reloaded but nothing changed :(
I would appreciate it if you could give me any advices!
Not sure which version of Expo you're using (expo --version), but I spun off a quick Expo project, copy pasted your code (minus the Firebase parts) and it works seamlessly.
Maybe try closing and reopening your emulator/simulator.
I'm using Expo tabs app and Expo WebBrowser.
What I want to accomplish is to keep the in-app browser open inside the tab not in a popup modal, so the tabs-bar keep visible and you would be able to open another tab and click back on the browser tab to continue from where you left.
My current code
import React, { Component } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { Constants, WebBrowser } from 'expo';
export default class LinksScreen extends React.Component {
state = {
result: null
};
render () {
return (
<View style={styles.container}>
<Button
style={styles.paragraph}
title="Open WebBrowser"
onPress={this._handlePressButtonAsync}
/>
<Text>{this.state.result && JSON.stringify(this.state.result)}</Text>
</View>
);
}
_handlePressButtonAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://expo.io');
this.setState({ result });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1'
}
});