How to customize a button in Nativebase

Nativebase has proved to be an instrumental library for making appealing user interfaces in React Native. Button, one of its many components, can be customized to suit the design desired.

To customize a button, we add a prop to it. The Button component provides many props. We will be looking at some of them in this shot.

Props

size

size: This determines the size of the button displayed. It can take values such as xs, sm, md, and lg.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <Button size="sm">
      BUTTON
    </Button>
      </Center>
    </NativeBaseProvider>
  )
}

startIcon

startIcon: This is used to include icons at the beginning of the button. We can get icons from icon libraries.

import React from "react"
import { Button, Icon, Center, NativeBaseProvider } from "native-base"
import { Ionicons } from "@expo/vector-icons"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        startIcon={<Icon as={Ionicons} name="mail" size={5}/> }
      >
       Start
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

endIcon

endIcon: This is used to include icons to the end of the button. Icons from external libraries can be used.

import React from "react"
import { Button, Icon, Center, NativeBaseProvider } from "native-base"
import { Ionicons } from "@expo/vector-icons"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        endIcon={<Icon as={Ionicons} name="arrow-forward" size={4} />}
      >
       End
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

colorScheme

colorScheme : This is used to change the color of the button. The default is primary.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        colorScheme="secondary"
      >
       End
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

isLoading

isLoading: This is used to show a spinner in the button.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        isLoading 
      >
       Loading
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

isLoadingText

isLoadingText: This is used with isLoading. It overrides any text used within the button.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        isLoading 
        isLoadingText="This shows"
      >
       Loading
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

variant

variant: This is used to change the variant of the button. It could take values such as solid, outline, ghost, link, and unstyled. The default is solid.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        variant="outline"
      >
       End
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

_text

_text: This is used to style the child’s text.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"


export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
       <Button
        colorScheme="green"
        _text={{
          color: "white",
        }}
      >
        Educative
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

isDisabled

isDisabled: This is used to toggle the disabled feature of the button. If present, the button would be disabled.

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
         <Button
        isDisabled
      >
       Disabled
      </Button>
      </Center>
    </NativeBaseProvider>
  )
}

ref

ref: This can also be used to customize a button. This is possible with the use of useRef

import React from "react"
import { Button, Center, NativeBaseProvider } from "native-base"
export const Educative = () => {
  const el = React.useRef({})
  React.useEffect(() => {
    el?.current.setNativeProps({
      borderWidth: 25,
      opacity: 0.7,
      borderRadius: 4,
    })
  }, [el])
  return (
    <Button size="md" variant={"solid"} ref={el}>
      Ref
    </Button>
  )
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <Educative />
      </Center>
    </NativeBaseProvider>
  )
}