How can i change the style for table?

BogdanRad commented 4 years ago

@jsamr How can i set the background color transparent and remove the border? Thanks!

I have to make it in this form .

And now my design is:

jsamr commented 4 years ago

@BogdanRad See https://github.com/native-html/table-plugin#tablestylespecs

BogdanRad commented 4 years ago

@jsamr can you give me an example please? here is my code, but don't working...

jsamr commented 4 years ago

@BogdanRad I'm willing to help, but I would need you to create a snack first, so that I can reproduce the issue consistently. I suggest you start from our snack template here: https://snack.expo.io/@jsamr/rnrhtml-template, and you can post the link when you're ready.

BogdanRad commented 4 years ago

Thanks @jsamr . I updated the link: https://snack.expo.io/mg4Cs8vSt

jsamr commented 4 years ago

@BogdanRad Perhaps it is just an omission. But you are not passing the config to the HTML component, so there is no chances the rendering can work! Have you tried your snack on the expo app for iOS / Android?

replace

<HTML html={html} />

with

<HTML html={html} {...htmlConfig} />

BogdanRad commented 4 years ago

I updated the link. I added htmlConfig to but doesn't working.. the style doesn't change. Is it ok how I add in config?

jsamr commented 4 years ago

@BogdanRad You are absolutely right. I'm looking into it and publishing a pre-release soon.

jsamr commented 4 years ago

@BogdanRad Actually I am wrong! The library just work as expected. You misunderstood (and I didn't realize) that the tableStyleSpecs is an attribute of the makeTableRenderer config parameter.

So you can now do instead:

import * as React from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import HTML from 'react-native-render-html';
import WebView from 'react-native-webview';
import {
  IGNORED_TAGS,
  alterNode,
  makeTableRenderer,
} from 'react-native-render-html-table-bridge';

const html = `
<table>
  <tr>
    <td><b>Culoare</b></td>
    <td>Negru</td>
  </tr>
  <tr>
    <td><b>Material</b></td>
    <td>Silicon</td>
  </tr>
  <tr>
    <td><b>Tip</b></td>
    <td>Carcasa</td>
  </tr>
  <tr>
    <td><b>Telefon compatibil</b></td>
    <td>Galaxy S20 Plus</td>
  </tr>
</table>
`;

const config = {
  WebViewComponent: WebView,
  tableStyleSpecs: {
    borderWidthPx: 0,
    thOddBackground: 'transparent',
    thEvenBackground: 'transparent',
    trOddBackground: 'transparent',
    trEvenBackground: 'transparent',
    thEvenColor: '#000000',
    trOddColor: '#000000',
    thOddColor: '#000000',
    trEvenColor: '#000000',
  },
};

const renderers = {
  table: makeTableRenderer(config),
};

const htmlConfig = {
  alterNode,
  renderers,
  ignoredTags: IGNORED_TAGS,
};

export default function App() {
  return (
    <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
      <HTML style={{flex: 1}} html={html} {...htmlConfig} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 0,
    backgroundColor: 'red',
  },
});

Next time, take the time to read the documentation.

native-html / plugins

How can i change the style for table? #23