React-Native how to get ID from SVG - javascript

i am new in react-native and i am trying to programm an Android app there I have the following problem, I have a svg thats shows all states from germany and I want to get the ID of a state if I press on it.
my code
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
import Germany from '../assets/Karte_Bundesrepublik_Deutschland.svg'
const StatesScreen = () => {
const handlePress = (stateName) => {
console.log(stateName.id)
};
return (
<View style={styles.container}>
<Germany onPress={(e) => handlePress(e)} />
</View>
);
};
export default StatesScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Link to the svg:
https://upload.wikimedia.org/wikipedia/commons/2/2c/Karte_Bundesrepublik_Deutschland.svg

Related

Invalid Value for 'component' prop for the screen 'Home'. It must be a valid React Component Error

I'm getting a Render Error on Expo Go that says 'Got an invalid value for 'component' propo for the screen 'Home'. It must be a valid React Component. Any advice??
This is my Home.js code
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function Home({ navigation, route}) {
const [returnedParams, setReturnedParams] = useState(" ");
useEffect( () => {
if (route.params) {
const myParams= route.params;
setReturnedParams(myParams.sendBackParams);
}
});
return (
<View style={styles.container}>
<Text >Home Screen</Text>
<Button title="Go to Details" onPress={ () => {
navigation.navigate("Details",
{details: 'here are some more details about the home page'});
}
}></Button>
<Text>{route.params?.sendBackParams}</Text>
<Text>{returnedParams}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

The button is not working in React Native

I'm new in react native, i follow tutorial form youtube to create a button, but why my button is not working that cannot click, nothing happen. Any one please help me, here is my code:
import React from 'react';
import { View, Text, StyleSheet, Button, Linking, } from 'react-native';
const App = () => {
return (
<View style={styles.body}>
<Text>Center</Text>
<Button title='Text Me' onPress={()=>{Linking.openURL('https://www.youtube.com')}}></Button>
</View>
)
};
const styles = StyleSheet.create({
body: {
padding: 16,
alignItems: 'center',
flex: 1,
justifyContent: 'center',
}
});
export default App;

React Native - Invariant Violation: Element type is invalid: expected string but got: undefiend

So when I use this code everything works just fine:
import * as React from 'react';
import { Button, Image, View, TouchableOpacity, StyleSheet, TouchableWithoutFeedback, KeyboardAvoidingView, SimpleAnimation, Text, TextInput} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '#expo/vector-icons';
import FlatButton from './button';
const thirdColor = 'red';
const secColor = 'blue';
const mainColor = 'green';
export default class ImagePickerExample extends React.Component {
state = {
image: null,
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Pick an image from camera roll"
onPress={this._pickImage}
/>
{image &&
<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
...
After that, everything I change is inside my redner() method and the code looks so:
...
export default class ImagePickerExample extends React.Component {
state = {
image: null,
};
render() {
let { image } = this.state;
return (
<TouchableWithoutFeedback onPress={() => {
//whenever touched the soroundings, keyboard will be dismissed
Keyboard.dismiss();
}}>
<View style={styles.container}>
<KeyboardAvoidingView behavior='position'>
<SimpleAnimation delay={500} duration={1200} fade staticType='bounce'>
<Text style={{color: thirdColor, fontSize: 61}}>Welcome back</Text>
</SimpleAnimation>
{image &&
<TouchableOpacity onPress={this._pickImage}>
<Ionicons name="ios-person" size={100} color={thirdColor} ></Ionicons>
</TouchableOpacity>}
<SimpleAnimation delay={600} duration={1200} fade staticType='bounce'>
<View style={styles.contYourName}>
<TextInput placeholder='Username' style = {styles.yourName}></TextInput>
</View>
</SimpleAnimation>
<SimpleAnimation delay={900} duration={1200} fade staticType='bounce'>
<View style={styles.regButtonView}>
<FlatButton text='finsih' onPress={alert}/>
</View>
</SimpleAnimation>
</KeyboardAvoidingView>
</View>
</TouchableWithoutFeedback>
);
}
...
After I did this I get following error message on my iPhone through Expo:
error code from IOS
What is wrong with it? My current React Native version is:
react-native-cli: 2.0.1
react-native: 0.61.4
EDIT:
Here are the functions:
componentDidMount() {
this.getPermissionAsync();
console.log('hi');
}
getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
}
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1
});
console.log(result);
if (!result.cancelled) {
this.setState({ image: result.uri });
}
};
Another EDIT:
As soon as I comment all <SimpleAnimation></SimpleAnimation> than everything works again. Why is <SimpleAnimation></SimpleAnimation> a problem?
change image state to "" (empty String) instead of null or handle null condition of image uri;
import * as React from 'react';
import { Button, Image, View, TouchableOpacity, StyleSheet, TouchableWithoutFeedback, KeyboardAvoidingView, SimpleAnimation, Text, TextInput} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '#expo/vector-icons';
import FlatButton from './button';
const thirdColor = 'red';
const secColor = 'blue';
const mainColor = 'green';
export default class ImagePickerExample extends React.Component {
state = {
image: "",
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Pick an image from camera roll"
onPress={this._pickImage}
/>
{image &&
<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
Check all methods are imported which you have used.
use this.state.image instead of image.
Rerun or reload
So the problem was the <SimpleAnimation></SimpleAnimation> tags in my render(). Thats because somehow this import got messed up. So I did the following that fixed my problem:
npm uninstall react-native-simple-animations
npm install react-native-simple-animations
After that import in your code with: import { SimpleAnimation } from 'react-native- simple-animations'; dont forget the { }

Why my text is not displaying in the center?

I started playing with react-native and I got a problem with centering a text, it's a very simple code but idk why it's not working
I was playing with animations too and none of all the examples that I did didn't work
So I have a View with a Text and the styles, with the flex should be enought, but isn't
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>Hello World</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
justifyContent: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});
Here is the App class
import React from 'react';
import { StyleSheet,View} from 'react-native';
import HomeView from './components/HomeView';
const App = () => {
return (
<View>
<HomeView/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
And the index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You are not closing your class with } after render().
Inside of the App class you need to render the View with container style
so it would be
const App = () => {
return (
<View style={styles.container}>
<HomeView/>
</View>
);
};
so it has flex: 1 and then can take the full space and align itself properly.

React Native header clickable with asyncStorage

Essentially, I have a Cloud Icon in the upper right hand corner of my app screen that when I click it I want it to edit an AsyncStorage variable in my application. And I am trying to get that variable to change the style of the <Icon> class.
To do this, I am trying to make it be a clickable element but I don't know how to transfer this onClick to a variable that each screen file sees.
Right now, the icon style ie based on navigation.state.params.cloud but that is only established on ComponentDidMount() in the each screen file.
Does anyone have any suggestions on how to accomplish this?
My React-Native app is set up like so:
index.js
import { AppRegistry } from 'react-native';
import App from './app/config/app';
AppRegistry.registerComponent('MobApp', () => App);
/config/app.js
import React from 'react';
import { TouchableOpacity, ActivityIndicator, AsyncStorage, Button, StatusBar, StyleSheet, View, Text, Image } from 'react-native';
import { StackNavigator, SwitchNavigator } from 'react-navigation'; // Version can be specified in package.json
import { configureFontAwesomePro } from "react-native-fontawesome-pro";
import Icon from "react-native-fontawesome-pro";
configureFontAwesomePro();
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import MainScreen from '../screens/main';
import SettingsScreen from '../screens/settings';
const cloudLogo = async function() {
let cloud = await AsyncStorage.getItem('cloud');
cloud = cloud === 'true';
cloud = !cloud;
await AsyncStorage.setItem('cloud', cloud.toString())
return cloud;
}
var navo = ({ navigation }) => {
return {
headerStyle: { backgroundColor:"#fff"},
headerTitle: (<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center' }}><Image style={{ width:25, height: 25, marginTop: 3, marginRight: 5}} source={require('../images/logo.png')}/><Text style={{ color:"#3F61E7", fontSize: 26, fontWeight:"600" }}>MyCompany</Text></View>),
headerRight: (<TouchableOpacity activeOpacity={0.8} onPress={ async () => {
let cloud = await AsyncStorage.getItem('cloud');
cloud = cloud === 'true';
cloud = !cloud;
await AsyncStorage.setItem('cloud', cloud.toString())
console.log((await syncUtil.getLocal()).cloud)
} } style={{ marginRight:15 }}>
<Icon name="cloud" type={ typeof navigation.state.params == 'undefined' ? "solid" : (navigation.state.params.cloud ? "solid" : "light") } color="#3F61E7" size={30} />
</TouchableOpacity>)
}
}
const AppStack = StackNavigator({
Home: { screen: MainScreen, navigationOptions: navo },
Settings: { screen: SettingsScreen, navigationOptions: navo },
});
export default SwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack
},
{
initialRouteName: 'AuthLoading',
}
);

Categories