Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New project with react-navigation, error #90

Closed
codthing opened this issue Apr 20, 2021 · 7 comments
Closed

New project with react-navigation, error #90

codthing opened this issue Apr 20, 2021 · 7 comments

Comments

@codthing
Copy link

bug

image

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

image

@nandorojo
Copy link
Owner

nandorojo commented Apr 20, 2021

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
Copy link
Owner

Closing as duplicate for #86

@codthing
Copy link
Author

@nandorojo Thx

@nandorojo
Copy link
Owner

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

@codthing
Copy link
Author

@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

image

@nandorojo
Copy link
Owner

nandorojo commented Apr 20, 2021

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

@codthing
Copy link
Author

image

so great, many thx.

I overlooked the import Text from dripsy

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants