Unsplash api in React Native using axios

Akbar Sheikh

3 min readMay 28, 2021

Create your react native project using following commands

expo init my-app

cd my-app

expo start

Need to install react -nativation in you app using following commands

1. Install React Navigation

npm install react-navigation

yarn add react-navigation

2. Install Dependencies

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Install React Navigation Stack

npm install react-navigation-stack @react-native-community/masked-view

yarn add react-navigation-stack @react-native-community/masked-view

4. Start the app and clear cache with expo r -c

Now in App.js

import { createAppContainer } from ‘react-navigation’;

import { createStackNavigator } from ‘react-navigation-stack’;

import SearchScreen from ‘./src/screens/SearchScreen’;

const navigator=createStackNavigator({

Search:SearchScreen

},{

initialRouteName:’Search’,

defaultNavigationOptions:{

title:’Image Search’,

}

});

export default createAppContainer(navigator);

Now create a folder with name scr within that folder create three another folder

a)screens

b)api

c)components

Now within in screens folder create file SearchScreen.js and paste the following code

import React, {useState}from ‘react’;

import {View,Text,StyleSheet,FlatList} from ‘react-native’;

import SearchBar from ‘../components/SearchBar’

import yelp from ‘../api/yelp’;

import ResultsDetails from ‘../components/ResultsDetails’;

const SearchScreen=()=>{

const [term,setTerm]=useState(‘Search Image’);

const [result,setResult]=useState([]);

const onSearchSubmit = async (term) => {

const response = await yelp.get(“/search/photos”, {

params: { query: term

}

});

setResult(response.data.results);

};

return(<View >

<SearchBar term={term}

onTermChange={(newTerm)=>{setTerm(newTerm)}}

onTermSubmit={()=>onSearchSubmit(term)}/>

<FlatList

data={result}

keyExtractor={(result) => result.id}

renderItem={({ item }) => {

return <ResultsDetails result={item} />;

}}

</View>);

};

const styles=StyleSheet.create({

});

export default SearchScreen;

Now within in api folder create file yelp.js and paste the following code and you need your client key

import axios from ‘axios’;

export default axios.create({

baseURL: “https://api.unsplash.com",

headers: {

Authorization:

“Client-ID your client key” }

});

Now within in components folder create file SearchBar.js and paste the following code

import React from ‘react’;

import {View,Text,StyleSheet,TextInput} from ‘react-native’;

import { Feather } from ‘@expo/vector-icons’;

const SearchBar=({term,onTermChange,onTermSubmit})=>{

return(<View style={styles.backGround} >

<TextInput placeholder=”search” style={styles.inputStyle}

value={term}

onChangeText={onTermChange}

onEndEditing={onTermSubmit}

autoCapitalize=”none”

autoCorrect={false}

</View>);

};

const styles=StyleSheet.create({

backGround:{

backgroundColor:’#76F40C’,

height:50,

borderRadius:5,

marginHorizontal: 15,

flexDirection: ‘row’,

marginTop:10

inputStyle:{

flex:1,

fontSize:20

iconStyle:{

fontSize:35,

alignSelf:’center’,

marginHorizontal:15

}

});

export default SearchBar;

Now within in components folder create file ResultsDetails.js and paste the following code

import React from ‘react’;

import { View, Text, StyleSheet, Image } from ‘react-native’;

const ResultsDetails = ({ result }) => {

return (

<Image source={{ uri: result.urls.full}}

style={styles.image}

</View>

<Text style={styles.name}>{result.alt_description}</Text>

</View>

);

};

const styles = StyleSheet.create({

container: {

marginLeft: 10,

borderRadius: 2,

borderWidth: 1,

borderColor: ‘#ddd’,

borderBottomWidth: 0,

shadowColor: ‘#000’,

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.1,

shadowRadius: 2,

elevation: 1,

marginLeft: 5,

marginRight: 5,

marginTop: 10,

marginVertical:10

image: {

height: 220,

width: ‘100%’,

right:10,

borderRadius: 5,

name: {

fontWeight: ‘bold’,

alignContent:’center’

imageContainer: {

justifyContent: ‘center’,

alignItems: ‘center’,

marginLeft: 10,

marginRight: 10,

padding: 10,

TextView:{

alignSelf:’center’

}

});

export default ResultsDetails;