Scribd
Upload
9 views1 page

React Native Explore Component Design

The document is a React Native component named 'explore' that creates a user interface for an 'Explore' screen. It includes a search bar with a search icon and a filter button, all styled with a dark theme. The component also has a scrollable area for displaying suggestions, although no suggestions are currently implemented.

Uploaded by

ackson322
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views1 page

React Native Explore Component Design

The document is a React Native component named 'explore' that creates a user interface for an 'Explore' screen. It includes a search bar with a search icon and a filter button, all styled with a dark theme. The component also has a scrollable area for displaying suggestions, although no suggestions are currently implemented.

Uploaded by

ackson322
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import { SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity,

View } from 'react-native'


import React from 'react'
import { SearchIcon, Filter } from 'lucide-react-native'

const explore = () => {


return (
<SafeAreaView style={{flex: 1, backgroundColor: '#0a0a0a', justifyContent:
'center', alignItems: 'center', paddingTop: 40}}>
<View style={{width: '90%', justifyContent: 'flex-start', alignItems:
'flex-start'}}>
<Text style={{color: '#32D59E',fontSize: 26, fontWeight:
700}}>Explore</Text>
</View>
{/**Search */}
<View style={{alignItems: 'center', justifyContent: 'center',width:
'90%'}}>
<View style={{flexDirection: 'row', alignItems: 'center', gap: 20,
justifyContent: 'space-between',}}>
<View style={{backgroundColor: '#1a1a1a',width:
'80%',flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor:
'#dddddd91', borderRadius: 10, paddingLeft: 9, marginVertical: 20}}>
<SearchIcon size={18} color={"#dddddd91"}/>
<TextInput placeholder="Search"
placeholderTextColor={'#dddddd91'} style={{color: '#fff', width: 'auto'}}/>
</View>
<TouchableOpacity style={{width: 40, height: 40, backgroundColor:
'#1a1a1a', justifyContent: 'center', alignItems: 'center', borderRadius: 10,
borderWidth: 1, borderColor: '#dddddd91'}}>
<Filter size={18} color={'#fff'}/>
</TouchableOpacity>
</View>
</View>

{/**Suggestions */}
<ScrollView style={{marginBottom: 60}}>

</ScrollView>
</SafeAreaView>
)
}

export default explore

const styles = [Link]({})

You might also like