react native display location of all files in a folder - react-native

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

Related

React native StyleSheet.create where should I put

I need to pass props into Styles. So I created StyleSheet inside the class. But normal practice would be to create StyleSheet outside from the class.
I want to know are there any performance drawbacks by having StyleSheet.create inside the class ?
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { connect } from 'react-redux'
import { Text } from 'native-base'
import p from '../../assets/colors/pallets'
const EmptyContainer = (props) => {
const texts = props.texts
const styles = StyleSheet.create({
emptyContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: p.background2[props.theme],
},
text: {
color: p.text1[props.theme],
},
})
return (
<View style={styles.emptyContainer}>
{texts.map((text) => (
<Text style={styles.text} key={Math.random()}>
{text}
</Text>
))}
</View>
)
}
const mapStateToProps = (state) => {
const { theme } = state
return {
theme: theme.theme,
}
}
export default connect(mapStateToProps)(EmptyContainer)
Edited:
There are several ways to pass props into StyleSheet.
Having StyleSheet inside class itself.
Pass props as function parameter to styles i.e. styles(props.theme). emptyContainer
What would be the best way by considering the performance of the app ?

How to convert my website to app using React Native Expo WebBrowser?

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

react native expo read data from object

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);

StackNavigation problem in react native app

I am having a problem solving this error. Do I need to render using class components only? or is there a way to use the function method?
Help me if you can.
What would be my best solution?
I have attached code below
EstesGuideNavigator.js
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import CategoriesScreen from '../screens/CategoriesScreen';
import PlaceScreen from '../screens/PlacesScreen';
import PlacesDetailScreen from '../screens/PlacesDetailScreen';
const EstesGuideNavigator= createStackNavigator({
Categories: CategoriesScreen, //mapping CategoriesScreen to Categories which makes easier to navigate
Places: {
screen: PlaceScreen
},
PlacesDetail:PlacesDetailScreen
});
export default createAppContainer(EstesGuideNavigator);
Below would be App.js
import React, {useState}from 'react';
import { StyleSheet, Text, View } from 'react-native';
import *as Font from 'expo-font';
import {Apploading} from 'expo';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';
const fetchFonts = () => { //fetching costum fonts for my app using Async
Font.loadAsync({
'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
});
};
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded
if (!fontLoaded) {
return(
<Apploading
startAsync = {fetchFonts}
onFinish = {() => setFontLoaded(true) }
/> //if assets(fonts here) is not loaded we display loading screen and load assets for app
);
}
return <EstesGuideNavigator/>;
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
CategoriesScreen.js
import React from'react-native';
import {View, Text, StyleSheet} from 'react-native';
const CategoriesScreen = props =>{
return(
<View style ={styles.screen}>
<Text> Categories Screen! Dummy </Text>
</View>
);
};
const styles = StyleSheet.create({
screen:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
});
export default CategoriesScreen;
This is just a dummy screen that i wanted to create.
It was a wrong import that react native automatically changed in my CategoriesScreen.js.

React native snapshot screen

I am building an app for iOS with React native and I would like to know how to take a snapshot of a given screen. I have found this library but I don't know how to use it. Does anyone know how to ?
EDIT:
I used the following code to capture a screen using the library but I get the given error.
try {
captureRef(viewRef, {
format: "jpg",
quality: 0.8
})
.then(
uri => console.log("Image saved to", uri),
error => console.error("Oops, snapshot failed", error)
);
} catch (e) {
console.log(e);
}
The error
ReferenceError: viewRef is not defined
Does anybody know how to fix the error?
Thank you
Sure, but you have to read a little about what a ref is. If you are already using React hooks, check this: https://es.reactjs.org/docs/hooks-reference.html#useref
(if not, just search on how to create a ref in React with createRef)
Basically, a ref is something that will let you identify your component using the same variable even if the component re-renders. So, viewRef in your example should be a reference to a given element. Like:
import React, { useRef } from "react";
function MyComponent() {
const viewRef = useRef();
return <View ref={viewRef}>content</View>
}
So, your draft could be something like:
import React, { useRef } from "react";
import {Button, View, Text} from 'react-native';
import { captureRef } from "react-native-view-shot";
function useCapture() {
const captureViewRef = useRef();
function onCapture() {
captureRef(captureViewRef, {
format: "jpg",
quality: 0.9
}).then(
uri => alert(uri),
error => alert("Oops, snapshot failed", error));
}
return {
captureViewRef,
onCapture
};
}
function MyComponent() {
const { captureViewRef, onCapture } = useCapture();
return (
<>
<View ref={captureViewRef}><Text>content</Text></View>
<Button title="Save" onPress={onCapture} />
</>
);
}
As far as I know, this only generates a temporary file. If you want to see the capture saved into your device, you should use CameraRoll https://facebook.github.io/react-native/docs/cameraroll
I won't cover how to use it here, but it would be something like:
CameraRoll.saveToCameraRoll(uri); // uri being the path that you get from captureRef method
Just notice that your app must ask for proper permission before attempting to save to the device gallery.
hi this can be with the help of react-native-view-shot
this is my parent component
import React, {Component,useRef} from 'react';
import {Platform, StyleSheet, Text, View,Image,Button} from 'react-native';
import { captureRef, captureScreen ,ViewShot} from "react-native-view-shot";
import NewVd from './NewVd';
import Newved from './Newved';
export default class App extends Component {
constructor(){
super();
this.state={
item:null,
captureProcessisReady:false,
myView:false
};
this.func=this.func.bind(this);
}
componentDidMount(){
}
result1=()=>{
console.log("i am here ");
this.setState({captureProcessisReady:true});
}
func = (uri) => {
console.log('ADD item quantity with id: ', uri);
this.setState({item:uri,myView:true});
};
render() {
return (
<View style={styles.container}>
{/* <NewVd
func={this.func}/> */}
<Newved />
<Text>...Something to rasterize...</Text>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Button onPress={()=>this.result1()} title="press Me"/>
<View>
{this.state.captureProcessisReady?( <NewVd func={this.func}/>):null}
</View>
<View>
{this.state.myView?( <Image source={{uri:this.state.item !== null?`${this.state.item}`:'https://picsum.photos/200'}} style={{width:100,height:100}} />):null}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
this is my child component
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ViewShot from "react-native-view-shot";
class NewVd extends Component {
constructor(props){
super(props);
}
onCapture = uri => {
console.log("do something with ", uri);
this.props.func(uri); //for the parent using callback
}
render() {
return (
<ViewShot onCapture={this.onCapture} captureMode="mount">
<Text>...Something to rasterize...</Text>
</ViewShot>
);
}
}
export default NewVd;