olalekanteeblaze

import React, { useState, useRef } from 'react';
import { View, TextInput, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const INPUT_WIDTH = (width - 120) / 4; // Subtracting 100 for padding and gaps

interface OTPInputProps {
    getOtp: (otp: string) => void;
    index: number | null;
}

olalekanteeblaze

import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import CountryPicker, { Country } from 'react-native-country-picker-modal';

interface ContactNumberInputProps {
    label: string;
    value: string;
    onChangeText: (text: string) => void;
    countryCode: string;
    setShowCountryPicker: (show: boolean) => void;

olalekanteeblaze

/*

Prompt:
  We have defined a basic dropdown via the Dropdown and DropdownItem components below, with example usage
  in the ExampleNav component. The Dropdown and DropdownItem components have some problems, and also 
  have room for improvements (doesn't everything?) A couple items TODO here (make sure to explain with comments!)
  
  0. How are you today? 😊
  1. Please fix any obvious issues you see with the dropdown and then save your gist.
  2. Please then make improvements to the dropdown dnd then save your gist again.

olalekanteeblaze

import { gql } from '@apollo/cient'
const GET_COUNTRY = gql`
query {
  countries {
    code
    name
    native
  }
}`

olalekanteeblaze

import React from 'react';
import { render } from 'react-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/',

olalekanteeblaze

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/',

olalekanteeblaze

query {
  countries {
    name
  }
}

olalekanteeblaze

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },

olalekanteeblaze

import React, { useState, useContext } from 'react'

export const NameContext = React.createContext()

export const NameContextProvider = ({ children }) => {
    const [name, setName] = useState('Moshood')
    return (
      <NameContext.Provider value={{ name, setName }}>
        {children}
      </NameContext.Provider>

olalekanteeblaze

import React, { useState, Component } from 'react'

export const NameContext = React.createContext()

export const NameContextProvider = ({ children }) => {
    const [name, setName] = useState('Moshood')
    return (
      <NameContext.Provider value={{ name, setName }}>
        {children}
      </NameContext.Provider>