I'm having trouble using this library with Styled Components, has anyone had this problem?

error: bundling failed: Error: While trying to resolve module react-native-responsive-fontsize from file /Users/michael/owlbrite/eventlocal/src/Modules/MapScreen/styles.js, the package /Users/michael/owlbrite/eventlocal/node_modules/react-native-responsive-fontsize/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/michael/owlbrite/eventlocal/node_modules/react-native-responsive-fontsize/index.ts. Indeed, none of these files exist:

• /Users/michael/owlbrite/eventlocal/node_modules/react-native-responsive-fontsize/index.ts(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
• /Users/michael/owlbrite/eventlocal/node_modules/react-native-responsive-fontsize/index.ts/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
  at ResolutionRequest.resolveDependency (/Users/michael/owlbrite/eventlocal/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:108:15)
  at DependencyGraph.resolveDependency (/Users/michael/owlbrite/eventlocal/node_modules/metro/src/node-haste/DependencyGraph.js:269:4352)
  at /Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:201:36
  at Generator.next ()
  at step (/Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:306)
  at /Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:536
  at new Promise ()
  at /Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:217
  at addDependency (/Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:92)
  at /Users/michael/owlbrite/eventlocal/node_modules/metro/src/DeltaBundler/traverseDependencies.js:237:9

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

when i use RFValue

I've tested in iPhone 6s, 7, 8, 8 Plus, and its works correctly but in iPhone 13 these fonts get bigger than others

iPhone 13

iPhone 6s works perfectly

Please change the docs for RFValue when using this module...

import { RFPercentage, RFValue } from "react-native-responsive-fontsize";

to

import RF from "react-native-responsive-fontsize";

throws an error when the stated import in the docs is used

noticed a strange behavior on iPhone 11, fontSize just explodes on that one

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';

import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions } from 'react-native/Libraries/NewAppScreen';
import { RFPercentage, RFValue } from 'react-native-responsive-fontsize';

const App = () => {
	return (
		<SafeAreaView style={{ flex: 1 }}>
			<StatusBar barStyle="dark-content" />
			<ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
				<Header />
				{global.HermesInternal == null ? null : (
					<View style={styles.engine}>
						<Text style={styles.footer}>Engine: Hermes</Text>
					</View>
				)}
				<View style={styles.body}>
					<View style={styles.sectionContainer}>
						<Text style={styles.sectionTitle}>Step One</Text>
						<Text style={styles.sectionDescription}>
							Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits.
						</Text>
					</View>
					<View style={styles.sectionContainer}>
						<Text style={styles.sectionTitle}>See Your Changes</Text>
						<Text style={styles.sectionDescription}>
							<ReloadInstructions />
						</Text>
					</View>
					<View style={styles.sectionContainer}>
						<Text style={styles.sectionTitle}>Debug</Text>
						<Text style={styles.sectionDescription}>
							<DebugInstructions />
						</Text>
					</View>
					<View style={styles.sectionContainer}>
						<Text style={styles.sectionTitle}>Learn More</Text>
						<Text style={styles.sectionDescription}>Read the docs to discover what to do next:</Text>
					</View>
					<LearnMoreLinks />
				</View>
			</ScrollView>
		</SafeAreaView>
	);
};

const styles = StyleSheet.create({
	scrollView: {
		backgroundColor: Colors.lighter
	},
	engine: {
		position: 'absolute',
		right: 0
	},
	body: {
		backgroundColor: Colors.white
	},
	sectionContainer: {
		marginTop: 32,
		paddingHorizontal: 24
	},
	sectionTitle: {
		fontSize: RFValue(24), // 5%
		fontWeight: '600',
		color: Colors.black
	},
	sectionDescription: {
		marginTop: 8,
		fontSize: RFPercentage(4), // 18
		fontWeight: '400',
		color: Colors.dark
	},
	highlight: {
		fontWeight: '700'
	},
	footer: {
		color: Colors.dark,
		fontSize: RFPercentage(3), // 12
		fontWeight: '600',
		padding: 4,
		paddingRight: 12,
		textAlign: 'right'
	}
});

export default App;

According your documentation https://github.com/heyman333/react-native-responsive-fontSize#methods the second argument of RFValue is optional. But checking your code it's not optional! https://github.com/heyman333/react-native-responsive-fontSize/blob/master/index.js

// guideline height for standard 5" device screen is 680
export function RFValue(fontSize, standardScreenHeight = 680) {
  const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
  return Math.round(heightPercent);
}

I have no problem working with RFValues on debug mode.

But when i do archive the app for AppStore, its like the RFValues cant calculate and breaks my app style.

I'm using react-native: 0.61.4 and styled-components 5.3.3

Has anyone had a similar problem?

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Is it also work for RN webview if the user resize font scaling?

Thanks

Hey guys, like the idea of the library.

Small suggestion:
It would be great if the RF function took in a fontsize as a parameter rather than a percentage, as it will be alot easier to install this library and utilise the RF function if I can simply wrap all my existing fontSize in the RF function.

I can try to make a PR for this if you're interested?

I noticed you've updated to use main.ts but you probably forgot to update your package.json because it still pointed at the index.js so now it's throwing an error.

I have used this lib in my project. I want text in one line need to auto adjust font on the basis of screen size.

const style = Stylesheet.create({
textStyle: {
fontFamily: 'ClearSans-Medium',
fontSize: RFPercentage(2),
}
});

I'm having trouble using this library with Styled Components, has anyone had this problem?

Dimensions.get("window") returns zero in some IOS versions (15.3,15.4 like wise) so as a workaround we used Dimensions.get("screen") instead and used as external library.

look at the offset of RFValue, for iPhone X, you are assigning a value of 78. This is probably 44 returned by getStatusBarHeight plus 34 returned by getBottomSpace. However, according to the 'react-native-iphone-x-helper' document, for unsafe iPhoneX, getStatusBarHeight returns 30. Therefore, offset cannot always be 78. Therefore, it seems reasonable to modify 78 to getStatusBarHeight() + getBottomSpace().