css 样式无法应用于本机反应

Question

I am showing some popup view which will display two texts over image. So, For that I am trying to setting css in strings. But, Text is coming in bottom of the image.

And I am using fusion charts library for loading graph, Once user taps on the graph lines, I am showing some popup (tooltip). That toolTip text here I am trying to customising according to my requirement

  toolText: '<div style={{  position: relative; text-align: center; color: white;}}><div><img height="50" width="50" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png"></img><div style={{ position: absolute; top: 2px; left: 8px; }}>Sample Text1<div><div style={{ position: absolute; top: 10px; left: 16px; }}>Sample Text2</div></div>',

And the output is follows

Any suggestions, I want to display text top of the view.

Answer 1

From my understanding, React/React Native requires camel-casing for selector names to be recognizable.

Reference: Inline Styles | React

---

Also, your html/css should be formatted similar to the following to received desired overlay effect.

<div style="position: relative;">
    <img>
    <div style="position: absolute;"></div>
    <div style="position: absolute;"></div>
</div>

Reference: CSS Layout - The position Property

Answer 2

Use position: 'absolute' and top , right , bottom and left to position your Text

export default class ToolText extends Component {
  render() {
    return (
      <View style={styles.toolTextContainer}>
        <Image
          style={styles.image}
          source={{
            uri:
              'http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png',
          }}
        />
        <Text style={styles.text1}>Sample Text 1</Text>
        <Text style={styles.text2}>Sample Text 2</Text>
      </View>
    );
  }
}

styles

text1: {
  position: 'absolute',
  top: 2, 
  left: 8,
},
text2: {
  position: 'absolute',
  top: 12,
  left: 16,
},
toolTextContainer: {
  position: 'relative',
  color: 'white',
  justifyContent: 'center',
},
image: {
  width: 50,
  height: 50,
},

Demo

Answer 3

Finally, I have found solution after done some R&D, Instead of image I set colour for that.

Hope this will help someone in future.

  toolText: `<div style="border-top-color: 200px solid #somecolor; margin-right: 2px; background-color:#fff display:outer-block; width:auto; height:60px;"><span><text style="font-size: 12px; margin-left:4px; font-weight: bold;  color:#003A69; margin-top:10px; display:inline-block;"> Sample Text1</text></span>{br}<span><text style="font-size: 12px; color:#003A69; margin-left:4px; font-weight: bold; margin-top:2px; display:inline-block;">Sample Text2</text></span>{br}</div>`,