I'm new on the language and i need to do something for friday, So there is my problem : /App.js: JSX value should be either an expression or a quoted JSX text (68:21)
And this is my whole code:
I tried multiple solution like with map, but i when i'm using map it's saying map isn't defined, i'm on it for now 2 days and i'm stuck on this..
import React, { Component, } from 'react';
import {
Text, View, StyleSheet, SafeAreaView, TextInput, FlatList, Keyboard, Image, ActivityIndicator
} from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
// You can import from local files
import AssetExample from './components/AssetExample';
import Users from './assets/Users.json';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const users = require('./assets/Users.json');
class App extends Component {
constructor(props) {
super(props);
this.state = {
searchKey : '',
}
}
state = {
searchBarFocused: false
}
componentDidMount() {
this.KeyboardDidShow = Keyboard.addListener('keyboardDidShow', this.KeyboardDidShow)
this.KeyboardWillShow = Keyboard.addListener('keyboardWillShow', this.KeyboardWillShow)
this.KeyboardWillHide = Keyboard.addListener('keyboardWillHide', this.KeyboardWillHide)
}
KeyboardDidShow = () => {
this.setState({searchBarFocused: true})
}
KeyboardWillShow = () => {
this.setState({searchBarFocused: true})
}
KeyboardWillHide = () => {
this.setState({searchBarFocused: false})
}
render() {
const filteredData = users.filter((item) => {
return item.first_name.indexOf(this.state.searchKey) >= 0
})
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 80, backgroundColor: 'pink', justifyContent: "center", paddingHorizontal: 5 }}>
<View style={{ height: 50, backgroundColor: 'white', flexDirection: "row", padding: 5, alignItems: "center"}}>
<Animatable.View animation={this.state.searchBarFocused ? "fadeInLeft" : "fadeInRight"} duration={400}>
<Icon name={this.state.searchBarFocused ? "md-arrow-back" : "ios-search"} style={{ fontSize: 24}}/>
</Animatable.View>
<TextInput placeholder='Search' style={{ fontSize: 24, marginLeft: 15, flex: 1 }} onChangeText={(value) => this.setState({searchKey : value})}
/>
</View>
</View>
<FlatList
style={{ backgroundColor: this.state.searchBarFocused? 'rgba(0,0,0,0.5)' : 'white', flex: 1 }}
renderItem = ({filteredData, index}) => {
return <Text>{filteredData.first_name}</Text>
}
keyExtractor={item => item.id}
/>
</SafeAreaView>
)
}
}
export default App;
const styles = StyleSheet.create({
});