import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View} from 'react-native';
import data from './localserver/data';
import { Dimensions } from 'react-native'
export default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
componentDidMount() {
let deviceWidth = Dimensions.get('window').width
console.log('sadas',deviceWidth)
}
render() {
var stylesubash={
height: 200,
width:200
}
return (
<View style={{flex: 1, flexDirection:
'column',alignItems:'center',justifyContent:'center'}}>
<TextInput
style={stylesubash}
placeholder="Enter your mobile no"
placeholderTextColor={data.primarysColor}
maxLength={10}
keyboardType='number-pad'
/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
My error
I am trying to get output but when I run the simulator it throws an error
Unable to find a module for event dispatcher, and I have one doubt too is any other way to get screen size rather importing the dimension from react native
delete the project from the simulator and erase all content from the simulator under hardware. make sure debug remotely is off
I think there is problem with your project setup, as I have just run your above code, I didn't find any problem , so please setup your new project , that might help you out with problem.
Related
So basically I'm trying to use a custom font throughout my app and to do so, I've made a custom component like so:
import React from "react";
import { Text, StyleSheet } from "react-native";
import * as Font from "expo-font";
export default class MyAppText extends React.Component {
constructor(props) {
super(props);
}
async componentDidMount() {
await Font.loadAsync({
'Wels': require('../assets/fonts/GTWalsheimPro-Regular.ttf'),
});
}
render() {
return (
<Text style={[styles.text, this.props.style]}>{this.props.children}</Text>
);
}
}
const styles = StyleSheet.create({
text: {
fontFamily: "Wels",
},
});
and used it like so:
import { MyAppText } from "../components/MyAppText";
<MyAppText style={styles.head}>Login</MyAppText>
however this does not seem to work and I get all sorts of errors, I tried just changing the fontFamily for every Text I had but even that won't work for some reason.
The error I've been getting recently is attached below.
Thanks in advance :)
Is there any existing workaround to show a splashscreen on web? It is not yet supported, and I'd like to avoid seeing a white screen while loading the website.
Ref.: https://docs.expo.io/versions/v41.0.0/sdk/splash-screen/
Known issue on github: https://github.com/expo/expo/issues/10839
I tested (and use) it with SDK 47 and adapted the example on https://docs.expo.dev/versions/latest/sdk/splash-screen/#usage like this (I simplified some components and functions here for better readability, so this example never "run" like this in reality):
import React, { useEffect, useState } from 'react';
import { Text, View, Platform } from 'react-native';
import Entypo from '#expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { runAllTheInitStuff } from './init';
import SomeProvider from './SomeProvider';
import AnotherProvider from './AnotherProvider';
import WebSplashScreen from './WebSplashScreen';
// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();
export default function App() {
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
await runAllTheInitStuff();
// Tell the application to render
setAppIsReady(true);
// hide splash screen
await SplashScreen.hideAsync();
}
prepare();
}, []);
// check if app is ready
if(!appIsReady) {
// check if we are in web
if(Platform.OS === 'web') {
return <WebSplashScreen />;
} else {
return null;
}
}
return (
<SomeProvider>
<AnotherProvider>
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>SplashScreen Demo! 👋</Text>
<Entypo name="rocket" size={30} />
</View>
</AnotherProvider>
</SomeProvider>
);
}
I do not use a <View> component as first entry point, but a lot of provider, so it would be quite challenging to use onLayout prop in my case. That's the reason why hiding the splash screen is done directly in the useEffect hook...
The WebSplashScreen component can be anything (i.e. the splash screen used in mobile app as image or what ever), I use a simple activity indicator from a material ui library...
Experiencing a strange issue in my React Native project for Android.
Using React-Navigation, I have a component with a button inside. This button should navigate to a new screen.
Thing is, the built-in button of React Native works like a charm, while the button of Native Base does not. I am completely confused, even more because I use this Native Base Button in another location, too. And there it works fine.
What is going on here?
Here, you see the application works with the built-in React Native button:
On the opposite, using the button of Native Base, it not only does not work, even styles are not applied.
Here is the code with the React Native button:
import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
type Props = { navigation: any };
const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
return (
<View>
<Button
title="Hi i am a button"
onPress={() => navigation.navigate("Details")}
></Button>
</View>
);
};
export default withNavigation(ButtonTestScreen);
And the code with Native Base button:
import React from "react";
import { Button, View, Text, StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import ButtonNavigate from "../../components/atoms/ButtonNavigate/ButtonNavigate";
type Props = { navigation: any };
const ButtonTestScreen: React.FC<Props> = ({ navigation }) => {
return (
<View>
<ButtonNavigate
title="Hi i am a button"
navigateTo="Details"
></ButtonNavigate>
</View>
);
};
const styles = StyleSheet.create({
button_style: {
backgroundColor: "red"
},
text_style: {
color: "#000",
fontSize: 30
}
});
export default withNavigation(ButtonTestScreen);
And the respective ButtonNavigate component itself:
import React from "react";
import { StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import { Button, Text } from "native-base";
type Props = {
title: string,
navigateTo: string,
navigation: any
};
const ButtonNavigate: React.FC<Props> = ({ title, navigateTo, navigation }) => {
return (
<Button
rounded
transparent
style={styles.button_style}
onPress={() => navigation.navigate(navigateTo)}
>
<Text style={styles.text_style}>{title}</Text>
</Button>
);
};
const styles = StyleSheet.create({
button_style: {
backgroundColor: "red"
},
text_style: {
color: "#151414"
}
});
export default withNavigation(ButtonNavigate);
I have just tested you code in expo.snack but without navigation and its ok,
see it here
You can test in your app to remove navigation and go step by step until you find the bug.
Folks, reason for this strange behavior is the "rounded" property of Native Base's button. In my application, somehow it causes the button to become non-clickable.
Maybe contributors of Native Base know what to do with this problem, so if you read this, maybe you have an idea.
Solution for my now was simply removing "rounded".
Native Base: 2.13.8
React-Navigation: 4.0.10
In my case it was the "top" in the container property of the button causing this issue. Removed it and adding "marginBottom" to the container above it solved the issue
In my react-native app i have added a package for event calendar Package link.
Which gives me an error message
console.error: "fontFamily 'Helvetica Neue' is not a system font and has not been loaded through Expo.Font.loadAsync.
App.js
import React from 'react';
import { StyleSheet, Text, View, Dimensions, StatusBar } from 'react-native';
import Header from 'react-native';
import { WelcomeScreen } from './screens/WelcomeScreen';
import EventCalendar from 'react-native-events-calendar';
let { width } = Dimensions.get('window');
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
events: [
{
start: '2017-09-06 22:30:00',
end: '2017-09-06 23:30:00',
title: 'Dr. Mariana Joseph',
summary: '3412 Piedmont Rd NE, GA 3032',
color: 'green'
} ]
};
}
_eventTapped(event) {
alert(JSON.stringify(event));
}
render() {
return (
<View style={{ flex: 1, marginTop: 20 }}>
<EventCalendar
eventTapped={this._eventTapped.bind(this)}
events={this.state.events}
width={width}
initDate={'2017-09-07'}
scrollToFirst
upperCaseHeader
uppercase
scrollToFirst={false}
/>
</View>
);
}
}
What is the solution for the problem?
you can add font by expo
import React from 'react'
import { AppLoading, Asset, Font, Icon } from 'expo'
import AppNavigator from './navigation/AppNavigator'
export default class App extends React.Component {
state ={
fontLoaded: false
}
async componentDidMount() {
await Font.loadAsync({
lato: require('./assets/fonts/Lato.ttf'),
'lato-bold': require('./assets/fonts/LatoBold.ttf'),
});
this.setState({ fontLoaded: true });
}
render() {
const {fontLoaded} = this.state
return (
<React.Fragment><Text style={{fontFamily: 'lato'}}>font test</Text></React.Fragment>
)}
else{return <Text>Loading....</Text>}
}}
if you more detail visit url
https://docs.expo.io/versions/latest/guides/using-custom-fonts/
fonts folder should be on assets > fonts folder inside past you Lato.ttf font
I am trying to implement navigation drawer on click of menu icon in toolbar, i am trying this from many days but i could not find any good resource online,I have followed some stack overflow answer and implemented this till now:
MyToolbar.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
export default class MyToolbar extends Component {
render() {
// var navigator = this.props.navigator;
return (
<ToolbarAndroid
title={this.props.title}
navIcon={require('./ic_menu.png')}
style = {styles.toolbar}
titleColor={'white'}
onIconClicked={this.props.sidebarRef}/>
);
}
}
const styles = StyleSheet.create({
toolbar: {
height: 56,
backgroundColor: '#08AE9E',
width: 370,
alignItems: 'center'
}
});
openDrawerFromToolbar.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
DrawerLayoutAndroid,
ScrollView,
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
export default class OpenDrawerFromToolbar extends Component {
render() {
var navigationView = (
<ScrollView>
<View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}>
<Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text>
</View>
// <ListView></ListView>
//render your list items
</ScrollView>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}
ref={'DRAWER'}>
<MyToolbar style={styles.toolbar}
title={'Calendar'}
sidebarRef={()=>this._setDrawer()}/>
</DrawerLayoutAndroid>
);
}
_setDrawer() {
this.refs['DRAWER'].openDrawer();
}
}
const styles = StyleSheet.create({
//your own style implementation
});
index.android.js
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
var OpenDrawerFromToolbar = require('./components/OpenDrawerFromToolbar');
class NewsTrack extends Component {
render() {
return (
<OpenDrawerFromToolbar
/>
);
}
}
AppRegistry.registerComponent('NewsTrack', () => NewsTrack);
Initially clicking on toolbar was not doing any action and navigation drawer was not opening now I'm getting blank screen. what am i missing in the code?
Edit : I have updated the code and now i am facing this error: "Element type is invalid: expected a string(for built-in components)or a class/function (for composite components) but got: object.
I have checked other such question they say some import or export is wrong i am not able to find out which in my case is wrong, can someone please help?
You can use Drawer provided by native base . It comes with toolbar functionality and very easy to use. I am using it in one of my projects.
https://docs.nativebase.io/Components.html#Drawer