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.
Related
I'm doing a project in react native but i have an issue with my expo google font. I'm pretty new to expo so I have basically no idea on how to fix this bug. The bug only appears on IOS (don't know about android) and works fine on web. The bug appears to be inside useFonts.js which is a file that's part of the expo-google-font.
One of my files using expo-google-font.
import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { useFonts, Inter_300Light } from "#expo-google-fonts/inter";
import { DefaultWidth } from "./DefaultWidth";
export default function AppleButton() {
let [fontsLoaded] = useFonts({ Inter_300Light });
if (!fontsLoaded) {
return null;
}
return (
<TouchableOpacity style={styles.appleBtnWrapper}>
<Image
style={styles.appleBtnImage}
source={require("../../../assets/third-party-icon/apple.png")}
/>
<Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
appleBtnText: {
color: "#fff",
fontWeight: "bold",
textAlign: "center",
fontFamily: "Inter_300Light",
fontSize: 16,
},
});
The useFonts.js use useEffect. These are the bugs I'm getting:
Here is the useFonts.js
import { useEffect, useState } from 'react';
import { loadAsync } from 'expo-font';
/**
* Load a map of custom fonts to use in textual elements.
* The map keys are used as font names, and can be used with `fontFamily: <name>;`.
* It returns a boolean describing if all fonts are loaded.
*
* Note, the fonts are not "reloaded" when you dynamically change the font map.
*
* #see https://docs.expo.io/versions/latest/sdk/font/
* #example const [loaded, error] = useFonts(...);
*/
export function useFonts(map) {
let [loaded, setLoaded] = useState(false);
let [error, setError] = useState(null);
useEffect(() => {
loadAsync(map)
.then(() => setLoaded(true))
.catch(setError);
}, []);
return [loaded, error];
}
Here is my App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {registerRootComponent} from 'expo'
import Navigation from './routes'
export default function App() {
return (
<Navigation/>
);
}
registerRootComponent(App);
Firstly install expo-app-loading from here
Then For your fonts create a folder called hooks where your App.js is located and inside that create a file useFonts.js
In useFonts.js write like this -
import * as Font from 'expo-font';
import { Inter_300Light } from '#expo-google-fonts/inter';
export default useFonts = async () => {
await Font.loadAsync({
Inter_300Light: Inter_300Light,
});
};
Your App.tsx should look like this
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { registerRootComponent } from 'expo';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts';
import Navigation from './routes';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const FontLoading = async () => {
await useFonts(); // Font is being loaded here
};
if (!IsReady) {
return (
<AppLoading
startAsync={FontLoading}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <Navigation />;
}
registerRootComponent(App);
Now if you want to use these fonts in any files then just simply write the name of the font. You don't need to Import font in every page
For example, your page which uses fonts should look like this
import React from 'react';
import { Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { DefaultWidth } from './DefaultWidth';
export default function AppleButton() {
return (
<TouchableOpacity style={styles.appleBtnWrapper}>
<Image
style={styles.appleBtnImage}
source={require('../../../assets/third-party-icon/apple.png')}
/>
<Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
appleBtnText: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
fontFamily: 'Inter_300Light', // Name of the font..Simple
fontSize: 16,
},
});
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);
I've been trying to navigate from Text to another screen but this error pops up, can anyone please help
This is a testing sheet for a bigger problem I have posted here Navigate when clicking on image doesn't work , I am trying to structure my code to navigate from an Image to a page. Thanks for helping
import React from 'react';
import { AppRegistry, StyleSheet, View, Image, TouchableOpacity, Text } from "react-native";
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './Menu/AddDocScreen'
export default class Mock extends React.Component {
render() {
const navigate = this.props.navigation
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => navigate.navigateToScreen(navigationAction)}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
)
}
}
const navigationAction = NavigationActions.navigate({
routeName: 'AddDocSreen',
})
function navigateToScreen(navigationAction) {
() => {
return navigationAction
}
}
const doc = createStackNavigator({
AddDocScreen: { screen: AddDocScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
})
Use it like this:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import AddDocScreen from './Menu/AddDocScreen'
class Mock extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor: 'rgba(215,215,215,1)'}}>
<Text>Home Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Mock: Mock,
AddDocScreen: AddDocScreen,
{
initialRouteName: 'Mock',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
I want to create a new StackNavigator with 'react-navigation' package
but when I initialize the screens for the StackNavigator i get an error -> undefined is not an object (evaluating '_TextUpload.TextUpload')
My TextUpload Component:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export class TextUpload extends Component {
constructor(props){
super(props);
this.state = {
ready: false
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Text Upload
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
My StackNavigator Component:
import React from 'react';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import { Home, Profile, Feed, Upload, Notes, TextUpload, ImageScreen } from '../components';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import {HOME_TAB_COLOR, FEED_TAB_COLOR, UPLOAD_TAB_COLOR, NOTE_TAB_COLOR, PROFILE_TAB_COLOR} from "../config";
const AppNavigator = createStackNavigator({
Home: {
screen: TextUpload
}
});
You need import your pages on StackNavigator page. This is how i'm using;
import React, { Component } from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Device from "../pages/device";
import DeviceScreen from "../pages/devices";
const Project= createStackNavigator({
Measures: {
screen: Device
},
Devices: {
screen: DeviceScreen
}
});
export default createAppContainer(Project);
its throw error when you import pages with curly brackets so don't use curly brackets.
I'm a novice.
Now i have to managing two or more stylesheet files in my project.
My current stylesheet code:
'use strict';
import { Platform } from 'react-native'
var React = require('react-native');
var {StyleSheet,} = React;
import {NavBar, TabBar} from './UiConfig'
import MyComponents from './styles/MyComponents'
const MyStyleTheme = StyleSheet.create({
middle: {
alignItems: "center",
justifyContents: "center"
},
NavBar: {
backgroundColor: NavBar.bgColor //from UiConfig
}
})
export default MyStyleTheme
And the another file:
'use strict';
import { Platform } from 'react-native'
var React = require('react-native');
var {StyleSheet,} = React;
const MyComponents = StyleSheet.create({
Navigator: {
...
...
}
})
export default MyComponents
So...it's possible to import a primary stylesheet instead of import another one just like CSS #import or not?
index.ios.js:
import React, { Component } from 'react'
import {
StyleSheet,
StatusBar,
Text,
View,
} from 'react-native'
import MyStyleTheme from '../primaryStyles'
...
...
...
render(){
return(
<View style={[MyStyleTheme.middle]}>
<View style={[MyStyleTheme.MyComponents]}>
</View>
);
}
Well...I found a way to solve it:
const obj = { flex: 1, justifyContent: "center", alignItems: "center" }
const MyComponents = StyleSheet.create({
Navigator: {
...obj,
height: 44
}
})