I’m developing an app using React Native, but I’m relatively new to it and have a tight deadline. To fill in the gaps, I’m using a WebView for some parts of the app. In React Native, I typically set font sizes and padding/margin in dp (density-independent pixels), but in the WebView, I have to use pixels (px), which leads to inconsistencies in font size and other dimensions between the app and the WebView content. How can I resolve these discrepancies to ensure consistent font and padding/margin sizes across both the React Native app and the WebView content? Fundamentally, the way sizes are set in an app (using dp and sp) differs from how they are set in a WebView (using px and rem). How can I effectively align these different sizing methods to maintain a consistent look and feel?

To solve this problem, i use dp to px formula in react web.

const [px, setPx] = useState(0); 
  useEffect(() => {
    const devicePixelRatio = window.devicePixelRatio || 1;
    const fontPx = 20 * devicePixelRatio; // 20 -> dp
    setPx(fontPx);
  }, []);
  return (
        <h2 style={{fontSize: px}} className='font-medium tracking-[-0.63px]'>
          2026년 3월 28일
        </h2>
)

However, using this approach, there is still a significant difference in font size between the WebView and the app.

Here is how I set up the WebView in my React Native app:

<SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: `http://${localIp}:${serverPort}/` }}
        style={styles.container}
        onError={(syntheticEvent) => {
          const { nativeEvent } = syntheticEvent;
          console.warn("WebView error: ", nativeEvent);
        }}
      />
    </SafeAreaView>

Our designer provides sizes in px using Figma. I would like to know how to apply these px values consistently across both the app and the WebView.

Any advice or guidance would be greatly appreciated!

Thank you!