Error in React native snack - react-native

Question

I don't understand the error message from the snack. "failed to install module ./assets/locales/sv.json..."
What does it mean? It seems to be this row that is failing:
// Import all locales
import en from './assets/locales/en.json';
import sv from './assets/locales/sv.json';
import he from './assets/locales/he.json';
import ar from './assets/locales/ar.json';
https://snack.expo.io/#niklasro/livejobb-snack
import React from 'react';
import { setLocale, strings, isoLangs } from './i18n.js';
import {Image, Picker, StyleSheet, ListView, Text, TextInput, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
import {Constants} from 'expo';
class HomeScreen extends React.Component {
state = {
language : '', itemValues: [], languages2: [], pickers: [], user: '',
username: 'Ivanka',
};
render() {
return (
<View style={styles.container}>
<View style={styles.section1}>
<Text style={[styles.text, {paddingBottom: 20}]}>{strings('login.welcome', { name: this.state.username })}</Text>
</View>
<View style={styles.section2}>
<Text style={[styles.text, {paddingTop: 20}]}>{strings('login.verified')}</Text>
</View>
<View style={styles.section3}>
<Text style={styles.text}>{strings('login.signup_as')}</Text>
</View>
<View style={styles.section4}>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Image source={require('./assets/stck2.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={styles.buttonText}>{strings('login.translator')}</Text>
</TouchableHighlight>
</View>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Image source={require('./assets/stck1.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Text style={styles.buttonText}>{strings('login.recruiter')}</Text>
</TouchableHighlight>
</View>
</View>
<TouchableHighlight onPress={() =>{ setLocale('en'); this.setState({
dumme: 'dummy'
}); }}>
<Text style={styles.buttonText}>en</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => setLocale('sv')}>
<Text style={styles.buttonText}>sv</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
class DetailsScreen extends React.Component {
constructor(props) {
super(props);
this.addLanguage = this.addLanguage.bind(this)
}
state = {
count: 0, itemValues: [], languages : [],languages2 : [], pickers: [], user: '',
username: 'Ivanka',
someVal: 'ar',
};
addLanguage() {
let pickers = this.state.pickers;
let count = this.state.count;
count++;
pickers.push(
{
id: 1,
color: "blue",
text: "text1"
}
);
let languages = this.state.languages;
languages.push('new');
this.setState({
count: count,
languages: languages,
});
let languages2 = this.state.languages2;
languages2.push('new');
this.setState({
count: count,
languages2: languages2,
});
}
update2(lang, ran, counter){
let languages2 = this.state.languages2;
languages2[counter]=lang;
this.setState({
languages2: languages2,
});
}
update(lang, ran, counter){
let languages = this.state.languages;
languages[counter]=lang;
this.setState({
languages: languages,
});
}
render() {
let counter = 0;
return (
<View style={{flex: 1, justifyContent: 'center', backgroundColor: '#fff'}}>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>
{strings('login.whichlanguages')} {'\n'}
</Text>
</View>
{this.state.pickers.map((picker) => {
counter++;
console.log("p"+picker.toString());
return <View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}>
<Picker style={{width: 150}} selectedValue={this.state.languages[counter-1]}
onValueChange={(lang) => this.update(lang, 0, counter-1)}
>
{
Object.keys(isoLangs).map((lang) => {
return <Picker.Item color="skyblue" key={Math.random()} label={isoLangs[lang].name} value={lang}/>
})
}
</Picker>
<Image
source={require('./assets/Arrow.png')}
/>
<Picker style={{width: 150}} selectedValue={this.state.languages2[counter-1]}
onValueChange={(lang) => this.update2(lang, 0, counter-1)}
>
{
Object.keys(isoLangs).map((lang) => {
return <Picker.Item color="skyblue" key={Math.random()} label={isoLangs[lang].name} value={lang}/>
})
}
</Picker>
</View>
})}
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight onPress={() => this.addLanguage()}>
<Text style={{
fontSize: 25,
fontFamily: 'normal',
alignItems: 'center',
color: 'skyblue',
}}>{'\n'}+ {strings('login.addlanguage')}{'\n'}{'\n'}</Text>
</TouchableHighlight>
</View>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
<Image
source={require('./assets/Next.png')}
/>
</TouchableHighlight>
</View>
</View>
);
}
}
const adresses = [
{
street: "English",
city: "Sydney",
country: "Australia"
},{
street: "Estonian",
city: "Sydney",
country: "Australia"
},{
street: "Esperanto",
city: "Sydney",
country: "Australia"
}
];
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class AutoComplete extends React.Component {
constructor(props) {
super(props);
this.state = {
searchedAdresses: []
};
}
submit() {
}
searchedAdresses = (searchedText) => {
let searchedAdresses = adresses.filter(function(adress) {
return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
});
this.setState({searchedAdresses: searchedAdresses});
};
renderAdress = (adress) => {
return (
<TouchableHighlight onPress={() => this.submit()}>
<View>
<Text>{adress.street}</Text>
</View>
</TouchableHighlight>
);
};
render() {
return (
<View style={styles.row}>
<View style={styles.container2}>
<TextInput
style={styles.textinput}
onChangeText={this.searchedAdresses}
placeholder="Type your language here" />
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress} />
</View>
<View style={styles.container2}>
<TextInput
style={styles.textinput}
onChangeText={this.searchedAdresses}
placeholder="Type your language here" />
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress} />
</View>
</View>
);
}
}
const RootStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
AutoComplete: {
screen: AutoComplete,
},
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack/>;
}
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: "row"
},
container2: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textinput: {
marginTop: 30,
backgroundColor: '#DDDDDD',
height: 40,
width: 150
},
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
section1: {
flex: 0.17,
justifyContent: 'flex-end',
alignItems: 'center'
},
section2: {
flex: 0.30,
justifyContent: 'flex-start',
alignItems: 'center'
},
section3: {
flex: 0.10,
justifyContent: 'center',
alignItems: 'center'
},
section4: {
flex: 0.43
},
text: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
paddingLeft: 40,
paddingRight: 40
},
buttonContainer: {
flex: 1,
flexDirection: 'row'
},
button: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5
},
image: {
width: 100,
height: 100
}
});

Answer 1

Comments can't be used in JSON
You have syntax errors in your .json files by using a comment. Fixed snack.