Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
first commit
  • Loading branch information
airamrguez committed Jun 4, 2017
1 parent 5e9dacc commit 55f4032
Show file tree
Hide file tree
Showing 61 changed files with 7,501 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitattributes
@@ -0,0 +1 @@
*.pbxproj -text
46 changes: 46 additions & 0 deletions .gitignore
@@ -0,0 +1,46 @@

# OSX
#
.DS_Store

# node.js
#
node_modules/
npm-debug.log
yarn-error.log


# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace


# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml

# BUCK
buck-out/
\.buckd/
*.keystore

80 changes: 80 additions & 0 deletions README.md
@@ -0,0 +1,80 @@
# React Native Measure Text

Measure text height without laying it out.

## Installation

### Automatic installation

`$ npm install react-native-measure-text --save`

`$ react-native link react-native-measure-text`

### Manual installation

#### iOS

1. In XCode, in the project navigator, right click `Libraries``Add Files to [your project's name]`
2. Go to `node_modules``react-native-measure-text` and add `RNMeasureText.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNMeasureText.a` to your project's `Build Phases``Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
- Add `import io.github.airamrguez.RNMeasureTextPackage;` to the imports at the top of the file
- Add `new RNMeasureTextPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-measure-text'
project(':react-native-measure-text').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-measure-text/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
compile project(':react-native-measure-text')
```

## Usage
```javascript
import MeasureText from 'react-native-measure-text';

const texts = [
'This is an example',
'This is the second line'
];
const width = 100;
const fontSize = 15;

class Test extends Component {
state = {
heights: [],
}
async componentDidMount() {
const heights = await MeasureText.measure({(
texts, /* texts to measure */
width, /* container width */
fontSize
);
this.setState({ heights });
}
render() {
const { heights } = this.state;
return (
<View>
{texts.map((text, i) => (
<Text
key={`text-${i}`}
style={{
width,
fontSize,
height: heights[i],
}}
>
{text}
</Text>
));
);}
</View>
}
}
```
36 changes: 36 additions & 0 deletions android/build.gradle
@@ -0,0 +1,36 @@

buildscript {
repositories {
jcenter()
}

dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
}
}

apply plugin: 'com.android.library'

android {
compileSdkVersion 23
buildToolsVersion "23.0.1"

defaultConfig {
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
lintOptions {
abortOnError false
}
}

repositories {
mavenCentral()
}

dependencies {
compile 'com.facebook.react:react-native:+'
}

6 changes: 6 additions & 0 deletions android/src/main/AndroidManifest.xml
@@ -0,0 +1,6 @@

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="io.github.airamrguez">

</manifest>

@@ -0,0 +1,81 @@

package io.github.airamrguez;

import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.util.Log;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableArray;

public class RNMeasureTextModule extends ReactContextBaseJavaModule {
public RNMeasureTextModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}

@Override
public String getName() {
return "RNMeasureText";
}

@ReactMethod
public void measure(ReadableMap options, Promise promise) {
if (!options.hasKey("width")) {
promise.reject(ERR_INVALID_WIDTH, "missing required width property");
return;
}
if (!options.hasKey("texts")) {
promise.reject(ERR_INVALID_TEXTS, "missing required texts property");
return;
}
if (!options.hasKey("fontSize")) {
promise.reject(ERR_INVALID_FONT, "missing required fontSize property");
return;
}

int width = Math.round((float)options.getDouble("width"));
ReadableArray texts = options.getArray("texts");
float fontSize = (float)options.getDouble("fontSize");

TextPaint paint = new TextPaint();
paint.setAntiAlias(true);
paint.setTextSize(fontSize);

WritableArray results = Arguments.createArray();

for (int i = 0; i < texts.size(); i++) {
String text = texts.getString(i);
float spacingMultiplier = 1;
float spacingAddition = 0;
boolean includePadding = false;
StaticLayout layout = new StaticLayout(
text,
paint,
width,
Layout.Alignment.ALIGN_NORMAL,
spacingMultiplier,
spacingAddition,
includePadding
);

results.pushDouble((double)layout.getHeight());
}

promise.resolve(results);
}

private static final String ERR_INVALID_WIDTH = "ERR_INVALID_WIDTH";
private static final String ERR_INVALID_TEXTS = "ERR_INVALID_TEXT";
private static final String ERR_INVALID_FONT = "ERR_INVALID_FONT";

private final ReactApplicationContext reactContext;
}
@@ -0,0 +1,28 @@

package io.github.airamrguez;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class RNMeasureTextPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new RNMeasureTextModule(reactContext));
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
3 changes: 3 additions & 0 deletions example/.babelrc
@@ -0,0 +1,3 @@
{
"presets": ["react-native"]
}
6 changes: 6 additions & 0 deletions example/.buckconfig
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
47 changes: 47 additions & 0 deletions example/.flowconfig
@@ -0,0 +1,47 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/

[options]
emoji=true

module.system=haste

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

unsafe.enable_getters_and_setters=true

[version]
^0.42.0
1 change: 1 addition & 0 deletions example/.gitattributes
@@ -0,0 +1 @@
*.pbxproj -text

0 comments on commit 55f4032

Please sign in to comment.