DEV Community: SAQ

Custom colors in React-Native

SAQ — Wed, 26 May 2021 17:54:40 +0000

Pop-up your app’s brand.

Obviously, you’ll be using multiple colors in your app but the question is how to make color usage effective and optimized.

We’ll be quickly adding colors to our react-native application.
First thing first define hierarchy of your app and know where you want your color file to be, I like to keep in utilities/config folder and name it as Color.js

Now open your newly made file and start defining your colors.

const Colors =
{}
export default Colors;

We made a simple “Colors” object and exported it.

const Colors =
{
AQUA_GREEN: '#1A5276',
RED: '#B03A2E',
ORANGE: '#DC7633',
PURPLE: '#8E44AD',
GRAY: '#566573',
}
export default Colors;

You can put Hex, rgba, rgb whatever sails your boat, I like to work mostly with hex unless need to control opacity.

Now save it and go back to your App.js or wherever:

import Colors from './src/utilites/Color'
after importing Colors you can use as you please..
<Text style={{
backgroundColor: Colors.AQUA_GREEN,
color: Colors.ORANGE
}}>
{HELLO_WORLD}
</Text>

& that’s practically it.
The main advantage of using colors in separate files that it is:

1- Maintainable. 2- Reusable. 3- Changeable.

Like say, if you want to change the shade of red a tone you won’t have to go in each file changing it, you can easily change it in your file & it’ll be applied to whole app.

** Automated **
Kidding lol, anyway, I have this series of easy customization things for your react-native app. If you want me to cover anything in this series do let me know in comments below.
Until next time!

P.S: Drop a heart, I just like that notification. 👇

Here's a link to github repo:
https://github.com/swairAQ/CustomizationReactNative

Youtube tutorial:
https://youtu.be/NEX_eQR-mEY

React-Native dropdown search-bar

SAQ — Fri, 02 Apr 2021 07:03:10 +0000

If you are like me who wanted an absolute dropdown view of searchbar results and didn’t have any luck and google directed you to this deserted article then cheers

I had a hard time finding a library or component which gave such results, there are dropdown but they will push the previous view below, surely don’t want that (or maybe I’m failing at being a programmer and don’t know how to query google right).
I didn’t use any third party libraries just to make it plain and simple but you can use BlurView to make the background faded a bit for a classy look, here’s a simple tutorial to add Blurview, promoting my other articles like an Arab should. 😁

This fanky thing is what you’ll get at the end
Okay, Im not really a design and great UI person but you can personalize it how you want and your designer has already handed over a design to you or you won’t be showing results in a dropdown.

Okay, let’s get coding…
App.js:

export default function App() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="Search"
placeholderTextColor='white'
onChangeText={onSearch}
/>

Here let’s declare some variables:

const [dataSource] = useState(['apple', 'banana', 'cow', 'dex', 'zee', 'orange', 'air', 'bottle'])
const [filtered, setFiltered] = useState(dataSource)
const [searching, setSearching] = useState(false)

dataSource is to hold main data.
filtered array is to hold searched data.
searching flag is to define if user is searching or not(need it to show dropdown)

First initialize your component make it class or function whatever you want, I prefer functional components for God knows what reason, and we’re gonna mimic functionality of searchbar with a textinput, it’s great to use TextInput for search because you can customize it to endless posibilites whereas searchbar libraries limit you one way or another and then there’s no need to add a heavy library with this that components and increase your app size.
Here we simply provided a search placeholder and onChangeText event to our component.

…
Okay I'm not attaching my random UI components code snippet, obvi you don’t need this but if you need something to try it on here’s the link to repo copy the whole code from there: Code Snippet
Okay, we’ll pause our screen here and go on to make a separate file for dropdown, I named it “SearchDropDown” but whatever, simply make a function there and return a plain view for now we’ll get to it later.
Now import this component to your main file App.js:
import SearchDropDown from './app/component/SearchDropDown'

Alright, here’s the deal now at the end of your whole view, I MEAN IT, the whole thing at the very bottom of your return statement go ahead and call your dropdown component

{/* Add all your components here or replace all this code to your components. */}
{/* and at the end of view */}
{
searching &&
<SearchDropDown
onPress={() => setSearching(false)}
dataSource={filtered} />
}
</View>
)}

we used our flag searching to show our component when user will be searching it’ll be displayed and not otherwise.
In our component we’re pausing an array to dataSource prop, it’s the filtered search result that we want to display in our dropdown list.
Now let’s head to functionality of search:

const onSearch = (text) => {
if (text) {
setSearching(true) //to show dropdown make it true
const temp = text.toLowerCase() //making text lowercase to search
//filter main dataSource and put result in temp array
const tempList = dataSource.filter(item => {
if (item.match(temp))
return item
})
//at the end of search setFiltered array to searched temp array.
setFiltered(tempList)
}
//if nothing was searched
else {
setSearching(false) //set searching to false
}
}

So, our basically functionality is complete, now we need to design our UI to display our dropdownlist, heading over to
SearchDropDown.js

export default function SearchDropDown(props) {
const { dataSource } = props //take data from parent
return (
//main container to position list over parent.
<TouchableOpacity onPress={props.onPress} style={styles.container}>
<View style={styles.subContainer}>
{
//if search results matched it'll have some length.
dataSource.length ?
//then show results
dataSource.map(item => {
return (
<View style={styles.itemView}>
<Text style={styles.itemText}>{item}</Text>
</View>
)
})
//if there were no results show no result text instead of empty view
:
<View
style={styles.noResultView}>
<Text style={styles.noResultText}>No search items matched</Text>
</View>
}
</View>
</View>
)

To make it further smooth we replaced parent view with Touchableopacity and used a callback method from parent it’ll close the search view on clicking anywhere empty on screen.

Here are final results

That's all folks!
Here’s a link to Github repo https://github.com/swairAQ/DropdownSearch, running source code.
There are many things that can go right but it’s upto you to sync this basic snippet to your app design and flow.

Happy codi….. Drop your heart first!!!
Happy coding!

COVID-19 and WORK FROM HOME?

SAQ — Wed, 15 Apr 2020 14:35:12 +0000

WFH is nothing new for IT people and especially for developers, we've been doing this as long as we can recall and to some point it's our dream way of working. As exciting as WFH sounds, it can overwhelm you and in this quarantine it can tire you up.

If you want to make the best of your time, there are some rules to that, I know you are pro of isolation but believe me on this one.. :D

1- Keep your WFH studio designated.
2- Complete your WFH setup, have your system, screens, accessories, test devices and any other thing you may need.
3- Keep some plant near you. (Please do that) It makes sure of fresh oxygen and help your strained eyes from all those dark-modes.
4- Keep a bottle of water near you, it's important to stay hydrated.
5- Now that your setup is complete, take pictures of your setup and don't forget to post it on social media cause I know everyone's gonna laaave it.
6- Take breaks. Short and more.
7- Take your dog out for a walk.
8- Don't apologize if your pet jumps into your video conference, everyone needs that.
9- Keep your working hours limited, I know your gonna get the lead to that error you've been stuck on whole day at time of leaving but you gotta drop it till tomorrow, leave the work at designated time. If you're gonna work long hours in start you're gonna be so sick of this WFH shortly.
10- Give time to your family.
11- On the topic of family, as important as it is to spend time with them it's also important you keep them away during working hours to keep your concentration.
12- If you want to spice up your daily video calls, add snap camera and apply some cool filters.

And that's a wrap. If I missed any points that you find helpful in your WFH please comment below.

Gradient Effect in React-Native

SAQ — Wed, 15 Apr 2020 14:21:33 +0000

Gradients add a very modern touch to your mobile apps, specially to button backgrounds.

To add this we'll use react-native-linear-gradient cause it's totally designed for gradients, lightweight and allows both top-bottom and left-right gradient effects.

To install library run
npm install react-native-linear-gradient --save
and for iOS:
$ cd ios && pod install && cd ..
as it installs all the pod dependencies to your project, make sure to restart your packager after making any changes on native side.
Now let's go code…

import the library to your file:
import LinearGradient from 'react-native-linear-gradient';
// Within your render function

My Gradient Button

...

// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});

Above code will add a top-bottom gradient of shades of blue to your button styled text. Simple as that, you have to just pass array of colors you want your gradient as.

That was easy, now see what can we do if we need a left-right or vice versa. For that LinearGradient give us start and end property where you can define axis.

//in return statement
style={height: '100%'}
activeOpacity={0.9}
onPress={() => console.log('Beep Beep')}
style={ width: 312,
height: '17.5%',
marginBottom: '3%'
}>
start={x: 1, y: 0} //here we are defined x as start position
end={x: 0, y: 0} //here we can define axis but as end position
colors={['#3393E4', '#715886']}
style={
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
}>
Log in

Here we developed a react-native button with gradient effect. You can play around with axis to meet your desires. Here's output of above code:

Yeyyy!!!
And that's a wrap. If you find any difficulties ping me. If you like the article high-five.