wiki.js

wiki.js

import React, { Component } from 'react'
import { FlatList, Text, View } from 'react-native'
// Styles
import { Button, Container, Header, Icon, Input, Item } from 'native-base'

export default class LaunchScreen extends Component {
    
    state={
        data: [],
        query: '',
        loadingIcon: false
    }
    
    onTyping = (search) => {
        fetch(`https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${search}`)
            .then(response => response.json())
            .then(result => this.setState({
                data: result[1]
            }))
    }
    
    renderItem = ({item, index}) => (
        <View key={index}>
            <Text>{item}</Text>
        </View>
    )
    
    render () {
        return (
            <Container>
                <Header searchBar rounded>
                    <Item>
                        <Icon name="ios-search" />
                        <Input placeholder="Search" onChangeText={(search) => {
                            this.onTyping(search)
                        }} />
                        <Icon name="ios-people" />
                    </Item>
                    <Button transparent>
                        <Text>Search</Text>
                    </Button>
                </Header>
    
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem}
                />
            </Container>
        )
    }
}