New project with react-navigation, error

[codthing]

bug

code App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

import { DripsyProvider } from 'dripsy'

const theme = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
  },
  fonts: {
    root: 'circular',
  },
  // custom fonts are easy!
  customFonts: {
    circular: {
      default: 'Circular-StdBook',
      bold: 'Circular-StdBold',
      black: 'Circular-StdBlack'
    }
  },
  space: [10, 12, 14],
  text: {
    thick: {
      fontFamily: 'root',
      fontWeight: 'black' // 'Circular-StdBlack'
    }
  }
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <DripsyProvider theme={theme}>
        {/* <SafeAreaProvider> */}
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        {/* </SafeAreaProvider> */}
      </DripsyProvider>
    );
  }
}

version info

[nandorojo]

2 options here:

1. Make a custom webpack config:

yarn add -D @expo/webpack-config

Create a custom webpack.config.js file:

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy'] },
    },
    argv
  )

  return config
}

Or 2: downgrade to v1.4

I recommend option 1. I still need to add this to the docs. Can you let me know if that works?

[nandorojo]

Closing as duplicate for #86

[codthing]

@nandorojo Thx

[nandorojo]

Did you try it? Please let me know what worked.

[codthing]

@nandorojo

Unfortunately it does not work.

Step1. yarn add -D @expo/webpack-config

Step2. create a webpack.config.js file

Step3. configue webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy'] },
    },
    argv
  )

  return config
}

Step4. App.tsx

import { DripsyProvider } from 'dripsy'

const theme = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
  },
  fonts: {
    root: 'circular',
  },
  // custom fonts are easy!
  customFonts: {
    circular: {
      default: 'Circular-StdBook',
      bold: 'Circular-StdBold',
      black: 'Circular-StdBlack'
    }
  },
  space: [10, 12, 14],
  text: {
    thick: {
      fontFamily: 'root',
      fontWeight: 'black' // 'Circular-StdBlack'
    }
  }
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <DripsyProvider theme={theme}>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </DripsyProvider>
    );
  }
}

Step5. use

<View style={styles.container}>
      <Text sx={{color: 'red', padding: [10,300]}}>Tab Two</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <EditScreenInfo path="/screens/TabTwoScreen.tsx" />
    </View>

Step6. Result

[nandorojo]

That looks like it works to me? What isn't working? Are you sure you imported Text from Dripsy?

[codthing]

so great, many thx.

I overlooked the import Text from dripsy

Thank you very much, and I am sorry at the same time.