amarcruz / react-native-text-size Goto Github PK

.../node_modules/react-native-text-size/android/build.gradle:
Warning:Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

import TextSize from 'react-native-text-size';

const demoText = await TextSize.flatHeights({
  text: ['မြန်မာစာ'],
});

const demoSingle = await TextSize.measure({
  text: 'မြန်မာစာ',
});

// output: demoText: [17]
console.log(`demoText: ${JSON.stringify(demoText)}`);

// output: demoSingle: {"width":52.5,"lineCount":1,"height":31}
console.log(`demoSingle: ${JSON.stringify(demoSingle)}`);

RCT_EXPORT_METHOD(flatHeights:(NSDictionary * _Nullable)options
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  // Don't use NSStringArray, we are handling nulls
  NSArray *const _Nullable texts = [RCTConvert NSArray:options[@"text"]];
  if (isNull(texts)) {
    reject(E_MISSING_TEXT, @"Missing required text, must be an array.", nil);
    return;
  }

  UIFont *const _Nullable font = [self scaledUIFontFromUserSpecs:options];
  if (!font) {
    reject(E_INVALID_FONT_SPEC, @"Invalid font specification.", nil);
    return;
  }

  const CGFloat optWidth = CGFloatValueFrom(options[@"width"]);
  const CGFloat maxWidth = isnan(optWidth) || isinf(optWidth) ? CGFLOAT_MAX : optWidth;
  const CGSize maxSize = CGSizeMake(maxWidth, CGFLOAT_MAX);

  // Create attributes for the font and the optional letter spacing.
  const CGFloat letterSpacing = CGFloatValueFrom(options[@"letterSpacing"]);
  NSDictionary<NSAttributedStringKey,id> *const attributes = isnan(letterSpacing)
  ? @{NSFontAttributeName: font}
  : @{NSFontAttributeName: font, NSKernAttributeName: @(letterSpacing)};

  NSMutableArray<NSNumber *> *result = [[NSMutableArray alloc] initWithCapacity:texts.count];
  const CGFloat epsilon = 0.001;
    
  UITextView *view = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, maxWidth, 0)];
  view.textContainerInset = UIEdgeInsetsZero;
  view.typingAttributes = attributes;
  view.textContainer.lineFragmentPadding = 0.0;
  view.textContainer.lineBreakMode = NSLineBreakByClipping;

  for (int ix = 0; ix < texts.count; ix++) {
    NSString *text = texts[ix];

    // If this element is `null` or another type, return zero
    if (![text isKindOfClass:[NSString class]]) {
      result[ix] = @0;
      continue;
    }

    // If empty, return the minimum height of <Text> components
    if (!text.length) {
      result[ix] = @14;
      continue;
    }
    view.text = text;
    CGSize size = [view sizeThatFits: maxSize];
      
    const CGFloat height = MIN(RCTCeilPixelValue(size.height + epsilon), maxSize.height);
    result[ix] = @(height);
  }
  resolve(result);
}

> Task :react-native-text-size:compileReleaseJavaWithJavac
Note: C:\Users\MyUser\Documents\Git\my-app\node_modules\react-native-text-size\android\src\main\java\com\github\amarcruz\rntextsize\RNTextSizeModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

module.exports = {
  dependency: {
    platforms: {
      android: {
        packageImportPath:
          "import com.github.amarcruz.rntextsize.RNTextSizePackage;",
        packageInstance: "new RNTextSizePackage()",
      },
      ios: {
        podspecPath: "ios/RNTextSize.podspec",
      },
    },
  },
};

	constructor(props) {
		super(props);

		this.state = {
//get height and width for images in chat
			imageWidth: screen.width / 0.75,
			imageHeight: screen.height / 0.75,

			dataProvider: new DataProvider((message1, message2) => {
				return message1._id !== message2._id
			}).cloneWithRows(this.props.MainStore.messages),
			layoutProvider: new LayoutProvider(
				(index) => {
					return 'LIST';
				},
				async (type, dim, index) => {
					switch (type) {
						case 'LIST':
							dim.width = screen.width;
							dim.height = screen.height / 0.75;
							break;
						default:
							dim.width = 0;
							dim.heigh = 0;
					}
				}
			),
		};

	}

//FlatHeights code estimating starts here
	async initFlatHeights() {
		const flatHeights = await this.getFlatHeights();
		//console.debug("ChatRoomScreen flatHeights has been initialized");

		this.setState({
			layoutProvider: new LayoutProvider(
				(index) => {
					return 'LIST';
				},
				(type, dim, index) => {
					switch (type) {
						case 'LIST':
							dim.width = screen.width;
							dim.height = flatHeights[index];
							break;
						default:
							dim.width = 0;
							dim.heigh = 0;
					}
				}
			),
		});
	}

	async getFlatHeights() {
		const flatHeights = [];

		const imgHeight = screen.width - 133;
		const fontSpecs = {
			fontFamily: (Platform.OS === 'ios') ? 'System' : 'Roboto',
			fontSize: 16,
		}
		const margingBtm = 12;
		const spaceBetweenMessages = 18;

		//console.debug("chat messages count = " + this.props.MainStore.messages.length);

		for (let i = 0; i < this.props.MainStore.messages.length; i++) {
			const text = this.props.MainStore.messages[i].text;
			const imgCount = (this.props.MainStore.messages[i].images != null) ? this.props.MainStore.messages[i].images.length : 0;
			const width = imgHeight;
			//const lineHeight = 22;

			//console.debug("LayoutProvider: imgCount=" + imgCount + ", text=" + text);
			const size = await rnTextSize.measure({
				text,             // text to measure, can include symbols
				width,            // max-width of the "virtual" container
				lineHeight, 	  // It should be greater if text contain Unicode symbols, such as emojis.
				...fontSpecs,     // RN font specification
			})
			const messageOwnerName = 30;
			flatHeights[i] = 0;

			if (this.props.MainStore.messages[i].userId != this.props.MainStore.userId) {
				if (i != 0 &&
					i < this.props.MainStore.messages.length - 1 &&
					this.props.MainStore.messages[i].userId === this.props.MainStore.messages[i - 1].userId &&
					this.props.MainStore.messages[i].userId === this.props.MainStore.messages[i + 1].userId) {
					//middle
					//console.debug("middle" + i + ": " + this.props.MainStore.messages[i].text);
				} else {
					if (i != 0 && this.props.MainStore.messages[i].userId === this.props.MainStore.messages[i - 1].userId) {
						//first message
						flatHeights[i] += messageOwnerName;
						//console.debug("first" + i + ": " + this.props.MainStore.messages[i].text);
					} else {
						if (i < this.props.MainStore.messages.length - 1 && this.props.MainStore.messages[i].userId === this.props.MainStore.messages[i + 1].userId) {
							// last message
							//console.debug("last" + i + ": " + this.props.MainStore.messages[i].text);
						} else {
							// only a single message
							flatHeights[i] += messageOwnerName;
							//console.debug("single" + i + ": " + this.props.MainStore.messages[i].text);
						}
					}
				}
			}

			if (this.props.MainStore.messages[i].images.length > 0) {
				if (this.props.MainStore.messages[i].text != "") {
					flatHeights[i] += (imgHeight * imgCount) + size.height + margingBtm + spaceBetweenMessages;
				} else {
					flatHeights[i] += (imgHeight * imgCount) + spaceBetweenMessages;
				}
				//console.debug("getFlatHeights: flatHeights[" + i + "]=" + flatHeights[i] + ", text=" + text + ", this.props.MainStore.messages[i].images.length: " + this.props.MainStore.messages[i].images.length);
			} else {
				flatHeights[i] += size.height + margingBtm + spaceBetweenMessages;
				//console.debug("getFlatHeights: flatHeights[" + i + "]=" + flatHeights[i] + ", text=" + text + ", text.size.height: " + size.height);
			}
		}

		return flatHeights;
	}

	async componentDidMount() {
		await this.props.MainStore.joinRoom(this.props.roomId);
		this.setState({
			dataProvider: this.state.dataProvider.cloneWithRows(
				this.props.MainStore.messages
			),
		});

		this.initFlatHeights();
	}

	async _onEndReached() {
		console.log('loading more messages');
		if (!this.refreshing && !this.props.MainStore.endOfMessagesReached) {
			this.refreshing = true;
			await this.props.MainStore.getMessages(this.offset)
				.catch(error => console.log(error.message));

			this.refreshing = false;
			this.offset += 25;
			this.setState({
				dataProvider: this.state.dataProvider.cloneWithRows(
					this.props.MainStore.messages
				),
			});

			await this.initFlatHeights();
		}
	}

	rowRenderer = (type, message, index) => {
		return (
			<Animatable.View duration={250} useNativeDriver={true} animation="fadeIn">
				{index != 0 &&
					index < this.props.MainStore.messages.length - 1 &&
					message.userId === this.props.MainStore.messages[index - 1].userId &&
					message.userId === this.props.MainStore.messages[index + 1].userId ? (
						<ChatMessage message={message} position={"middle"} onImagePress={this._onPressImage(message)} onProfilePress={this._onPressProfile(message)} />
					) : (index != 0 &&
						message.userId === this.props.MainStore.messages[index - 1].userId) ? (
							<ChatMessage message={message} position={"first"} onImagePress={this._onPressImage(message)} onProfilePress={this._onPressProfile(message)} />
						) : (index < this.props.MainStore.messages.length - 1 &&
							message.userId === this.props.MainStore.messages[index + 1].userId) ? (
								<ChatMessage message={message} position={"last"} onImagePress={this._onPressImage(message)} onProfilePress={this._onPressProfile(message)} />
							) : (
								<ChatMessage message={message} position={"only"} onImagePress={this._onPressImage(message)} onProfilePress={this._onPressProfile(message)} />
							)}
			</Animatable.View>
		)
	}

	render() {
		return (
			<View
				style={styles.container}
			>
				{this.props.MainStore.users.length > 0
					? <RecyclerListView
						contentContainerStyle={{ marginTop: 5 }}
						onEndReached={this._onEndReached.bind(this)}
						dataProvider={this.state.dataProvider}
						layoutProvider={this.state.layoutProvider}
						rowRenderer={this.rowRenderer}
						renderFooter={this.renderFooter}
						onEndReachedThreshold={screen.height}
					/>
				: null}
			</View>
		);
	}

         <AutolinkComponent 
              style={styles.text}
              text={this.props.postText}
              hashtag="instagram"
              mention="twitter"
              linkStyle={{ fontWeight:'bold' }}
         />

export function renderedTextSize(text: string, size: number = 14, fontFamily: string = 'someFontName') {

  const fontSpecs: TSFontSpecs = {
    fontFamily: fontFamily,
    fontSize: size,
  };

  return TextSize.measure({
    text,
    ...fontSpecs,
  }).then((result: TSMeasureResult) => {
    return {width: result.width, height: result.height};
  }).catch((err) => {
    console.log('Error in measure:', err);
  });
}

s.source_files = 'RNTextSize/**/*.{h,m}'

import rnTextSize, { TSFontSpecs } from 'react-native-text-size'
.
.
.
function renderedTextSize(text: string, size: number = 14, fontFamily: string = 'moein') {

  const dimension = {
    width: 0,
    height: 0,
  };
  const fontSpecs: TSFontSpecs = {
    fontFamily: fontFamily,
    fontSize: size,
  };

  rnTextSize.measure({
    text,             // text to measure, can include symbols
    ...fontSpecs,     // RN font specification
  }).then(result=> {
    dimension.width = result.width;
    dimension.height = result.height;
  });

  return dimension;
}