Ability to opt out of styled-components dependency?

[tranhl]

It would be nice to use this component without having to introduce styled-components and styled-system (e.g. when you are using a different styling system). Is it possible to opt out of using styled-system with the current implementation?

[jeanverster]

Hi @tranhl , sorry about the late response - been a bit slow after the holidays. At the moment it would require a fair amount of refactoring in order to opt out of the styled-components dependency. I get why it would make sense to allow for regular React Native styling as well, I will give it some more thought and revert back.

[huangkaiw3n]

I actually just tried installing on my bare react native project and the expo-constants dependency was a pain with additional required dependencies and configs till I thought it wasn't worth it :(

But thanks for the great work! Would really be nice if the animation work and logic could be used simply without requiring additional dependencies. The styling and views could be left to the user of the library.

[huangkaiw3n]

Btw, I got your context file working without additional dependencies in React Native. It's pretty sick. Just have to provide my own Toast view and it works really well. Also to put the ToastProvider inside a SafeAreaProvider. This helps us with the statusbar offset. Will leave the code here. Thanks again! Wouldn't have been able to do this myself.

/* eslint-disable no-bitwise */
import * as React from 'react'
import {
  SafeAreaView,
  LayoutAnimation,
  UIManager,
  StyleSheet,
} from 'react-native'
import Toast from '@Components/Toast'

const ToastContext = React.createContext({})

const useToast = () => React.useContext(ToastContext)

const originalOffset = 16

UIManager &&
  UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true)

const ToastProvider = ({children, position, offset: offsetProp}) => {
  const [toasts, setToasts] = React.useState([])

  const toast = newToast => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
    setToasts(prevToasts =>
      position === 'BOTTOM'
        ? [
            ...prevToasts,
            {index: prevToasts.length, id: weakUuid(), ...newToast},
          ]
        : [
            {index: prevToasts.length, id: weakUuid(), ...newToast},
            ...prevToasts,
          ],
    )
  }

  const hideToast = id => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
    setToasts(prevToasts => prevToasts.filter(el => el.id !== id))
  }

  const offset = offsetProp || originalOffset

  const canvasStartTop = {
    top: 0,
    paddingTop: offset,
    paddingBottom: 0,
  }

  const canvasStartBottom = {
    bottom: 0,
    paddingTop: 0,
    paddingBottom: offset,
  }

  return (
    <ToastContext.Provider value={{toast}}>
      {children}
      <SafeAreaView
        style={[
          styles.canvas,
          position === 'BOTTOM' ? canvasStartBottom : canvasStartTop,
        ]}
        pointerEvents='box-none'
      >
        {toasts.map(config => {
          console.log(config)
          return (
            <Toast key={config.id} onClose={id => hideToast(id)} {...config} />
          )
        })}
      </SafeAreaView>
    </ToastContext.Provider>
  )
}

function weakUuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

export {ToastProvider, useToast}

const styles = StyleSheet.create({
  canvas: {
    position: 'absolute',
    left: 0,
    right: 0,
  },
})

[vincentjames501]

+1, just ran into this and adds a decent amount of bloat. I think not forcing a third party stying system is probably a better idea?