feat: add ascii toggle

src/components/Search/AsciiToggle.spec.tsx

@@ -0,0 +1,19 @@
+import 'react-native'
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import AsciiToggle from './AsciiToggle'
+
+describe( '<AsciiToggle />', () => {
+  it( 'should fire onPress event', () => {
+    const onPressMock = jest.fn()
+
+    const { getByTestId } = render(
+      <AsciiToggle onPress={onPressMock} testID="ascii-toggle" />,
+    )
+
+    fireEvent.press( getByTestId( 'ascii-toggle' ) )
+
+    expect( onPressMock ).toHaveBeenCalled()
+  } )
+} )

src/components/Search/AsciiToggle.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Text, Pressable, StyleSheet, PressableProps } from 'react-native'
+
+const styles = StyleSheet.create( {
+  asciiToggle: {
+    padding: 8,
+    borderRadius: 10,
+    shadowOpacity: 0.2,
+    flexDirection: 'row',
+    shadowOffset: { width: 0, height: 2 },
+    backgroundColor: 'rgb(255,255,255)',
+  },
+  gurmukhi: {
+    fontFamily: 'OpenGurbaniAkhar-Black',
+  },
+} )
+
+type AsciiToggleProps = Omit<PressableProps, 'style'>
+
+const AsciiToggle = ( { ...props }:AsciiToggleProps ) => (
+  <Pressable style={styles.asciiToggle} {...props}>
+    <Text style={styles.gurmukhi}>A</Text>
+    <Text>A</Text>
+  </Pressable>
+)
+
+export default AsciiToggle

src/components/Search/index.ts

@@ -1,2 +1,3 @@
 export { default as SearchBar } from './Bar'
 export { default as SearchFilter } from './Filter'
+export { default as AsciiToggle } from './AsciiToggle'

src/screens/SearchScreen.tsx

@@ -1,13 +1,18 @@
 import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { SearchBar, SearchFilter } from '../components/Search'
+import { SearchBar, SearchFilter, AsciiToggle } from '../components/Search'
 import BackButton from '../components/BackButton'
 import Container from '../components/Container'
 import Colours from '../themes/colours'
 import { mx, px } from '../themes/utils'
 
 const styles = StyleSheet.create( {
+  asciiToggle: {
+    ...mx,
+    marginLeft: -10,
+    marginRight: 10,
+  },
   backButton: {
     ...mx,
     marginLeft: 5,
@@ -55,10 +60,17 @@ const SearchScreen = () => {
       <View style={styles.searchZone}>
 
         <View style={styles.searchStrip}>
+
+          <View style={styles.asciiToggle}>
+            <AsciiToggle />
+          </View>
+
           <View style={styles.searchBar}>
             <SearchBar onChangeText={handleTextChange} />
           </View>
+
           <BackButton style={styles.backButton} />
+
         </View>
 
         <View style={styles.filterZone}>